JavaScriptでwait、sleep、pause

JavaScriptにはwaitやsleepのような関数はありませんが、タイマとクロージャを利用することにより擬似的にwaitをかけることができます。

ところがネット上にイマイチまとまった説明がない。

というわけで、素人なりにざっくりまとめてみようというエントリがこれ。

適切なタイミングでwaitをかけることにより、ブラウザが長時間固まるのを防ぐことができます。

■ 前提

setTimeoutは関数を指定時間後に登録するだけで、特に待ったりはしません。

登録後は即座に続きの処理が実行されます。

また、setTimeoutの返値はタイマIDで、登録した関数の返値は意味を持ちません。

このタイマIDをclearTimeoutに渡せば、関数が実行される前にキャンセルすることができます。

■ シンプルなwait

function simple_wait(){
    var restart = function(){
        [[ PROCESS 2 ]]
    };
    
    [[ PROCESS 1 ]]
    
    setTimeout(restart, WAITTIME_IN_MILISECOND);
}

あらかじめ続きの処理を関数として用意しておき、setTimeoutで指定時間後に呼び出します。

この例では

[[ PROCESS 1 ]]を実行
WAITTIME_IN_MILISECOND後にrestartを登録
simple_wait終了
WAITTIME_IN_MILISECOND後にrestartが呼び出される
[[ PROCESS 2 ]]を実行
終了

という流れで、[[ PROCESS 1 ]]と[[ PROCESS 2 ]]の間にwaitをかけています。

    setTimeout(function(){
        restart("abc");
    }, WAITTIME_IN_MILISECOND);

このように無名関数を噛ませることで、restartに引数を与えることもできます。

■ waitつきループ

function loop_with_wait(){
    var restart = function(){
        [[ PROCESS ]]
    };
    
    var i = 0, length = ARRAY_LENGTH_ETC;
    (function(){
        if (i >= length) {
            restart();
            return;
        }
        
        [[ HEAVY PROCESS ]]
        
        i++;
        setTimeout(arguments.callee, WAITTIME_IN_MILISECOND);
    })();
}

arguments.calleeは今実行している関数を表しています。

この例では指定時間後に実行している無名関数をもう一度呼び出すことでループさせています。

iは順次インクリメントされ、length以上になったときループは終了し、restartを呼び出します。

■ 複数の重い関数の間にwaitを入れる

function execute_some_heavy_functions(){
    var funcarray = [];
    
    funcarray.push(
        function(arg){
            [[ HEAVY PROCESS 1 ]]
        }
    );
    
    funcarray.push(
        function(arg){
            [[ HEAVY PROCESS 2 ]]
        }
    );
    
    ...
    
    var arglist = ["arg1", "arg2", ...];
    (function(){
        var func = funcarray.shift();
        if (!func) return;
        func(arglist.shift());
        setTimeout(arguments.callee, WAITTIME_IN_MILISECOND);
    })();
}

配列を利用して、複数の関数を一定間隔で実行します。

登録された関数を順次取り出し、配列が空になった時点で終了します。

前二つのように、終了時に続きの処理を行う関数を呼ぶこともできます。