JavaScriptでゆっくり1件ずつ処理

By | 2012/12/10

JavaScriptで、ゆっくり1件ずつ処理させたい。でも、JavaScriptにはsleep関数にあたるものがありません。

たとえば、Ajaxなどでサーバ側の処理を1件ずつゆっくり呼び出すなど。そういったJavaScript側でsleepを挟みたくなるような場面はよくあります。

ネット検索してよく出てくる例は、「待ちたい場面で、一定秒数過ぎるまで、for空ループでクルクル回す」というもの。。
でも、それではブラウザに無駄な負担を掛け続けてしまいます。

setTimeout を使って一定秒数経つごとに1件分の処理を呼び出すほうが正解でしょう。

<span id="result">ここにカウント表示</span>

<script type="text/javascript">
var wait = 1000;	// 1000分の1秒単位で指定
var i = 0;
var result = document.getElementById('result');
// 1秒おきに30までカウントしてみる。
function func1(){
	if (i < 30) {
		i++;
		result.innerHTML = i;
		// 次の1回を仕込む ※wait秒後に実行
		setTimeout("func1()", wait);
		return;
	} else {
		result.innerHTML = '終了';
	}
}
// 最初の1回を仕込む ※即時実行
setTimeout("func1()", 0);
</script>

サンプル実行
ここにカウント表示


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です