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>
サンプル実行
ここにカウント表示
