- javascriptってsleepってないの？
- setTimeoutってよくわかんないしどう書けばいいの？
- なんでもいいからjavascriptでsleepしたいんだー！
javascriptで開発していると、処理の途中でsleep(スリープ)してwait(待機)させたい時があると思います。
JS以外の言語(RubyとかPHPとか)だと、Sleep関数なるものがよく用意されていて
sleep(秒数)みたいな書き方で、指定した秒数だけ遅延させることが出来るんですよね。
でもjavascriptにはそんな便利な関数がありません。
なので、javascriptでも簡単にsleep的なwait処理の書き方をお知らせします。
実際に開発でも推奨できるやり方と、デバッグの時なんかで簡易的にsleepさせる方法と2パターン紹介します。
ケースに応じて好きな方のコードをコピペして使ってもらえば、簡単にsleep処理が実装できるはずです！
- コピペ1行でできるjavascriptのsleep処理の書き方
- とりあえずsleep的な動きができる簡単な書き方
JavascriptでSleep的に処理をwaitさせる方法！
1行でOKな最新なやりかた(推奨）
ほぼ最新の開発環境(ES2017以降)のjavascriptであれば、1行で書くことができます。
利用するのはpromiseとasync/await
const _sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
await _sleep(2000);簡単に解説
このsleepの方法では、_sleepという関数を作って、setTimeoutのpromise関数をawaitで呼びます！
従来からあるsetTimeoutを使ったcallバックのやり方を、Promiseを使ってasync/awaitで呼び出す方法ですね！
簡単な擬似的なやりかた(非推奨)
とりあえず開発時やデバッグでsleep処理を偽装したい人向けのやり方です。
// 例)2秒スリープさせる
const d1 = new Date();
while (true) {
const d2 = new Date();
if (d2 - d1 > 2000) {
break;
}
}簡単に解説
見てもらえばすぐわかると思うんですけど、簡単に解説します。
1行目でd1に処理開始時ののDateを取得します。
2行目からWhile文で無限ループに入ります。
3行目のループ内で、d2に最新のDateを取得します。
4行目で、d1とd2の差分を比較し、指定した秒数以上だった場合にループをbreakで抜けます。
オーカミちょー簡単ですね！
ただし、お察しの通り、無駄な処理がずっとループで動きますのでcpuとか使ったりします。
絶対に本番環境での使用はしないように！
ループ処理で処理が動き続けるので本番では実装は絶対NG
javascriptでsleep(wait)させる方法まとめ
javascriptでsleepを実装するには、基本的にはsetTimeoutを使うやりかたをしましょう！
ES2017以降であれば、1行で済むのでオススメです！
ループ方式の擬似sleepは開発時のちょっとしたstub程度で自己責任でご利用ください。
個人的には結構sleep処理をJavascriptで行うことってあると思うんですよね。
特に開発途中のAPI実装時とかは非同期処理の確認でsleepさせて処理をwaitさせたりします。
オーカミsleep関数つくってくれてもいいのになー
とりあえずコピペでできるjavascriptのsleep処理でした。
だれかの参考になれば幸いです。
- javascriptでsleep処理はsetTimeoutで行う
- ES2017移行であれば1行で書けるpromiseのasync/awaitがおすすめ
- 簡単に書ける擬似方法もあるけど、ご利用は自己責任で
プログラムを勉強中の方へ
おすすめはプログラムスクール
これからプログラムを勉強したい人はプログラミングスクールに通うのが1番の近道だと思います。
独学でももちろん勉強はできますが、わかる人に教えてもらうのがやっぱりイチバン！
無料のオンライン説明会もやってるようなので、興味ある人は是非見てみてはどうでしょう？
参加者限定特典あり。TECH::CAMPオンライン説明会
おすすめのjavascript入門本
どれも入門書で簡単な内容なのでおすすめです！
コメント