Hirooooo’s Labo

開発メモ、ガジェット、日記、趣味など、思った事を思ったまんま書くブログ

Javascriptでスリープ(Sleep)的な処理を簡単に実装する方法

f:id:hirooooo-lab:20161101124844j:plain

Javascriptで開発していると、処理の途中でスリープして待機をさせたい時があると思います。

他の言語(RubyとかPHPとか)だと、Sleep関数なるものがよく用意されていて

sleep(秒数)

みたいな書き方で、指定した秒数だけ遅延させることが出来るんですけど、Javascriptにはそんな便利な関数がありません。たぶん…

なので、Javascriptでも簡単に擬似スリープを行い、処理を待機させる書き方をメモしておきます。

Javascriptでスリープ(Sleep)的な処理を簡単に実装する方法

promiseとasync/awaitを使う方法(推奨)

const _sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// 2秒スリープ
await _sleep(2000);

簡単に解説

_sleepという関数を作って、setTimeoutのpromise関数をawaitで呼びます!
以上。

※ただし、ES2017以降の環境でないと動かないので、実際にブラウザで動かす時はトランスパイルしてね!

擬似スリープ(非推奨)

const d1 = new Date();
while (true) {
  const d2 = new Date();
  if (d2 - d1 > 5000) {
    break;
  }
}

簡単に解説

見てもらえばすぐわかると思うんですけど、簡単に解説おば。

  • 1行目でd1に処理開始時ののDateを取得します。
  • 2行目からWhile文で無限ループに入ります。
  • 3行目のループ内で、d2に最新のDateを取得します。
  • 4行目で、d1とd2の差分を比較し、指定した秒数以上だった場合にループをbreakで抜けます。

ちょー簡単ですね。

上記の例では5秒(5000ミリ秒) の待機が行われるはずです。

Javascriptでスリープ(Sleep)処理する方法まとめ

基本的には promiseとasync/awaitを使う方法のsetTimeoutを使うようにしましょう!
ループ方式の擬似スリープはCPU使ったりするので、開発時のちょっとしたstub程度で自己責任でご利用ください。

個人的には結構Sleep処理をJavascriptで行うことってあると思うんですよね。
特に開発途中のAPI実装時とかは非同期処理の確認でよくSleepさせて処理を待機させたりします。
なのでsleep関数つくってくれてもいいのになー。って毎回思います。

ちなみに、主にデバックや開発用にしか使用してないので、パフォーマンス的な問題とかは一切考慮してないので悪しからず・・・・。

だれかの参考になれば幸いです。

これからプログラムを勉強したい人はプログラミングスクールに通うのが1番の近道だと思います。
無料のオンライン説明会もやってるようなので、興味ある人は是非見てみてはどうでしょう?

10秒で登録完了!TECH::CAMPオンライン説明会