javascriptにおけるsleep,wait関数

javascriptで一定時間sleepする関数を使いたくなったので、その方法をメモしておきます。

やりたいこと

c言語で言う所のこういう処理をjavascriptでもやりたくなりました。

非同期で何か別の処理が行われており、そちらの準備が整うまで待ってからdo_somithing()関数を実行したい。
という非常にシンプルなもの。

javascriptにsleep関数は、、、

ありません。
そもそもjavascriptの使い方って、onreadyとかonloadに関数をどんどん追加するとか、windowのサイズを測るとかに使うことが多いので、時間変化に伴って何かを行う処理というのはあまり想定されていないのかもしれません。
デザインの時間的変化はcssのtransitionを使えば良い話ですので。
それでもsleep()関数を使いたい。という時は、、、

setTimeout()関数で代用する。
javascriptでsleep()関数を実現するためには、setTimeout()という関数を用いて実現することができます。

setTimeout()関数

setTimeout()関数は、引数に指定した関数をnミリ秒後に実行することができる関数になります。使い方は以下の通りです。

setTimeout( function, milliseconds, param1, param2, … )

・function
関数オブジェクト。実行したい関数を渡します。必須の引数です。

・milliseconds
第一引数で渡した関数を何秒後に実行するかを指定します。単位は[ms](ミリセカンド、1/1000秒。)オプション引数で、デフォルト値は0。(引数を指定しなかった場合には、即時に第一引数で渡した関数を実行します。)

・param1, param2, …
第一引数にて指定した関数に渡すパラメータを指定します。
IE9以前のバージョンでは使用することができません。

sleep関数を作る

というか、setTimeout()関数があれば、sleep()関数は必要はないですね。

どこかの記事で、無理やりCPUをビジー状態にしてまでsleep()関数を作成しているサイトを見かけましたが、そんなことをせずとも、setTimeout()関数で待ちたい秒数と、待った後に実行したい関数を入れてあげれば良い話です。

サンプルコード

上の方で記述した「やりたいこと」のコードをこのsetTimeout()関数を用いて実現してみると、

こんな感じになる。
肝となるのは、sample_func()の中で、setTimeout()関数を用いてsample_func()自身をもう一度呼び出している点だろう。

これで、is_ready()がtrueになるまで100ms間隔でsample_func()が呼び出される。以上だ。

ちなみにsetTimeout()関数の親戚として、setInterval()という引数に指定した関数を指定した秒数[ms]毎に繰り返し呼び出す関数もある。引数はsetTimeout()関数と全く同じ。

あと、setTimeout()、setInterval()で予約した関数の実行をキャンセルする関数clearTimeout()、clearInterval()という関数もあるので、頭の片隅に入れておくと良い。

setTimeout(), setInterval()はclearのためのIDを戻り値として返してくれる。
その値をclearTimeout(), clearInterval()関数の引数に放り込めば、予約した関数の実行をキャンセルすることができる。

ちょっと小言。

最近javascriptに触れる機会が増えてきたのだが、javascriptの関数でググるとしょうもないページがヒットすることが多いように感じる。

c++とかpythonとかの関数を検索する時は、関数名と引数の種類、戻り値といった情報が簡潔にまとめられたわかりやすいサイトに巡り会うことが多いのだが、javascriptとかjqueryではそうはいかない。
長ったらしい冗長な説明ばかりしてあって、肝心な部分が書いてなかったりする。
最悪なのは、「試しにやってみましたできました。」っていう報告の記事。
初歩的な関数が動きましたって言う報告は誰も聞きたくは無い。
そんな内容の薄い記事を検索上位に持ってくるgoogleさんサイドにも問題はあるのかと。
web系の記事に、もっとまともな記事が増えることを切に願う。

こんなことを言っておいて、私が誰にとってもわかり易く簡潔な文章をかけているかと言われると、自身を持って首を縦には振れないので、私もまだまだ精進は必要だろう。

あまり長くなるので、この辺にしておくが。