【JQuery】配列の要素を一定間隔の時間を空けて出力する方法

公開日：2015/03/07

更新日：2015/02/27

カテゴリー: JQuery

配列に格納されている要素をループを使って出力すると一度にすべての要素が出力されますが、一定間隔の時間（数秒）を空けて一つずつ出力したい場合はどうすればいいのでしょうか？

ここでは私が行った方法を記載しています。

ループで配列の要素を画面に出力

いくつかの要素を格納した配列を作り、「実行」ボタンを押すと配列の要素をループで処理して「#add-contents」にすべて出力するスクリプトを作成しました。

jQuery(function($){
	$('#button').on('click', function(event){
		//配列の準備
		array_element = ["hoge", "piyo", "hogera", "piyopiyo", "ysklog.net"];

		//配列の要素数をカウント
		array_count = array_element.length;

		//ループして配列の要素を「#add-contents」要素に出力
		for(i=0; i<array_count; i++){
			$('#add-contents').append("<p>" + array_element[i] + "</p>");
		}
	});
});

このスクリプトをこちらで実行すると、配列の要素が一度にすべて出力されるのがわかります。

これを一定間隔の時間（数秒）を空けて配列の要素を一つずつ出力してみたいと思います。

setInterval関数を使う

setInterval関数は、一定の遅延間隔を置いて関数を繰り返し呼び出す関数です。

intervalID = window.setInterval(func, delay[, param1, param2, ...]);
intervalID = window.setInterval(code, delay);

intervalID は clearInterval に渡すことのできる固有のインターバル ID です。
func は繰り返し呼びたい関数です。
もう一つの構文の code は、繰り返し呼び出したいソースコードの文字列です。
delay は、setInterval() が funcを呼び出す前に待つべきミリ秒数(1/1000 秒) です。
最初の構文で関数にパラメータを付加したものは、Internet Explorer では動作しないので注意してください。

このsetInterval関数を使えば、遅延による繰り返し処理で配列の要素を一定間隔の時間を空けて出力することが可能となります。

jQuery(function($){
	$('#button').on('click', function(event){
		//配列の準備
		array_element = ["hoge", "piyo", "hogera", "piyopiyo", "ysklog.net"];

		//配列の要素数をカウント
		array_count = array_element.length;

		//カウント用変数
		i = 0;

		//setInterval関数で1秒の遅延
		timer = setInterval(function(){
				//「#add-contents」に配列の要素を出力
				$('#add-contents').append("<p>" + array_element[i] + "</p>");

				//カウントアップ
				i++;

				//カウント用変数「i」が配列の要素数「array_count」になればsetInterval関数をキャンセル
				if(i == array_count){
					//clearInterval関数の繰り返しをキャンセル
					clearInterval(timer);
				}
		}, 1000);
	});
});

このスクリプトをこちらで実行すると、確かに配列の要素が一定間隔の時間を空けて出力されているのがわかります。

なお、setInterval関数はストップさせるまでひたすら繰り返し処理を行いますので、配列の要素をすべて出力したあとはclearInterval関数を使って繰り返しをキャンセルする必要があります（20行～24行目）。

あわせて読んでほしい！

Follow @ysklog_net 　