JavaScript: ループ中にスリープを入れたい時の代替方法

JavaScriptにはsleep()関数がありません。 そこで他の手法を使ってスリープを実現する必要があります。

今回はループ中にスリープを入れたい場合の代替方法を紹介します。

「配列の要素内容を順番に、1秒おきに表示する」というシンプルな処理です。 何らかの問題を解決したい場合は、こういったシンプルな処理から考え始めると解決方法が見えやすくなります。

ではさっそく始めます。
もし、sleep()があったら、こんなコードになります。

 // もし、sleep()があれば、
var arr = [0, 1, 2, 3];

for (var i = 0; i < arr.length; i++){
    console.log(arr[i]);
    sleep(1000);
}

setInterval()を使う

JavaScriptにはsleep()はありませんが、 一定間隔で処理を行うメソッドとしてsetInterval()があります。

setInterval()を使ってスリープ処理を実現すると次のようなコードになります。


var arr = [0, 1, 2, 3];
var counter = 0;
var timerid;

timerid = setInterval(function(){
    console.log(arr[counter]);
    counter++;
    if (counter >= arr.length){
        // タイマーをクリア
        clearInterval(timerid);
    }
}, 1000);

コードを順番に解説していきます。

var arr = [0, 1, 2, 3];
var counter = 0;
var timerid;

配列の他に、カウント用の変数(counter)とタイマーID用の変数(timerid)を使用します。


timerid = setInterval(function(){

    // 処理を記述
    
}, 1000);

setInterval()の中に記述された処理が1秒おきに実行されます。 「この枠組みがループとスリープを兼ね備えている」と考えれば良いでしょう。

console.log(arr[counter]);
counter++;
if (counter >= arr.length){
    // タイマーをクリア
    clearInterval(timerid);
}

console.log()で表示させた後に、counterを1増加させて、counterが配列の要素数以上になったら終了します。 終了するにはタイマーID(timerid)をクリアする必要があるので、 clearInterval(timerid)とします。

これで、最初に記述した「もしsleep()があった場合の処理」と同じ処理が実現できます。

JavaScript入門