2013/11/26

【JavaScript】処理の実行タイミングを遅らせる方法

【JavaScript】処理の実行タイミングを遅らせる方法

JavaScriptには,sleep関数やwait関数といった「一定時間処理を停止する」というような関数が存在しません.
しかし,時には「処理Aの終了を待ってから処理Bを行いたい」というような場合もあるかと思います.

そこで,今回は処理の実行を遅延させる方法を紹介します.

目次

処理の遅延

処理Aで「あるデータを取得してHTML文を整形」,処理Bで「処理Aで整形したHTML文を出力」なんて動作をさせたいとします.
しかし,処理AでHTML文が整形される前に処理Bが走ってしまい,空のデータが出力されてしまったり,出力結果が取得したデータ数より少ないなんてことが発生してしまうことがあります.

そこで,一定時間処理を停止する方法を取るか,「処理Aの完了」を一定の間隔で確認し,「完了していれば処理B」を走らせ,「完了していなければ一定時間経過した後に再度確認」するというような方法を取れば先に処理Bが走るのを防げます.

処理を停止させる方法(非推奨)

下記のソースコードのように「1000msウェイトさせる」など,for文やwhile文のループ処理を使用して,終了条件を
((ループを終了した時間 - ループを開始した時間)<1000)
と設定してしまうとビジーウェイトとなってしまいます.

function wait (){
    var time1 = new Date().getTime();
    var time2 = new Date().getTime();
 
    while ((time2 -  time1)<1000){
        time2 = new Date().getTime();
    }
}

こういったウェイトの設定は,ユーザの操作を受け付けなくなり,ページ全体が固まったようになってしまうので使うのは避けましょう.

上記のコードが間違っていたため,修正いたしました.
ご迷惑をお掛けし,申し訳ございませんでした.ご指摘いただき有り難うございます.

処理を遅延させる方法(推奨)

上記の方法では,ビジーウェイトになってしまうので,ユーザによる操作を受け付けるような方法を取らなければなりません.

そこで,setInterval()メソッドclearInterval()メソッドを使用します.

setInterval()メソッドは,指定された時間ごとに処理を行うメソッドで,処理の間隔をミリ秒で指定でき,タイマーのような役割をします.戻り値にはタイマーIDが返されます

サンプルのソースは以下ようになります.

var huga = 0;
var hoge = setInterval(function() {
    console.log(huga);
    huga++;
    //終了条件
    if (huga == 10) {
	clearInterval(hoge);
	console.log("終わり");
    }
}, 500);

まず,setInterval()メソッドの使い方です

setInterval(callback, delay, parameter) 

使い方としては,1つ目のパラメータに実行する処理を記述します.

2つめのパラメータに処理を行う時間間隔をミリ秒で指定します.

3つめのパラメータはsetIntervalメソッドで呼び出される関数に渡すパラメータを設定することができます.(省略可)

このように記述することで,設定した間隔でメソッドの処理が呼び出されます.

以下のようにif文等の条件に処理終了時の条件を指定し,行いたい処理を記述しておけば,ブラウザの負荷を低減しながら処理の終了を待つことが出来,処理を遅延させることが出来ます.

if (huga == 10) {
	clearInterval(hoge);
	console.log("終わり");
    }

このままではsetInterval()メソッドが一定の間隔で呼び出され続けてしまうので,clearInterval()メソッドsetInteval()メソッドの戻り値であるタイマーIDを指定します.

clearInterval(タイマーID);

これを条件文内に記述しておくことで,処理Bの実行後にタイマーを停止させることができます.

まとめ

意外と簡単に遅延処理が実行できますね.これで,処理Aを待って処理Bを実行するという動作が出来るようになります.是非使ってみてください.