javascriptでsleep的に処理をwaitさせる方法(コピペでOK)

  • 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で呼び出す方法ですね!

ES2017以降の環境でないと動かないので、実際にブラウザで動かす時はトランスパイルが必要です。
Promiseもawaitも使えない環境の場合は、setTimeoutをcallbackさせる方法を探してみてください!

簡単な擬似的なやりかた(非推奨)

とりあえず開発時やデバッグで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入門本

どれも入門書で簡単な内容なのでおすすめです!

よかったらシェアしてね!

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次
閉じる