Webコーダー・プログラマーの貝原(@touhicomu)です。JavaScriptを使っていると処理を一時停止し、ある一定時間経過した後でまた再開したいときがありますよね。他のプログラミング言語を使ったことがある方は、sleepを使えばできるだろうと考えるでしょう。実は、JavaScriptにはsleepというメソッドが存在していません。JavaScriptにもsleep機能を実現する方法はあります。下記の流れで、JavaScriptでsleep機能を実現する方法を確認していきましょう。awaitでsleep機能を作る他の言語とちょっと使い勝手は違うかもしれませんが、慣れてしまえばなんということはありません。sleep機能を使うという方も、サンプルコードをしっかり確認して学習していってくださいね。まとめsleepとは「sleep」とはプログラムの実行を一時停止するものです。マルチスレッドや無限ループなどで、メインの処理から分岐し処理を停止させることで、CPUの負荷を抑える目的で使われています。メイン処理の負荷が納まった頃にsleep処理から復帰することで、CPU負荷に余裕を持って処理を再開させることができます。sleepには主にOSがsleep機能を提供している場合と、言語環境自身が提供してる場合もあります。JavaScriprtは後者であり、さらにsleep機能を実現する関数はありません。用意された関数を使ってsleep機能を実現するプログラムを作る必要があります。この記事で紹介する方法は厳密なsleepではなく、擬似的に動くsleepであることを覚えておいてください。ビジーwaitを利用したsleep機能を作るsleep機能を実現する一つの方法として、while()ループを指定秒の間「空ループ」させるやり方があります。これは、開始時刻を記録しておいてそこから指定秒数経ったらwhile()ループを抜けるという手法です。このやり方だと常にCPUを消費して「ビジー状態」になるという点に注意が必要です。Date()との差をとります。その差が指定秒数以上になったらwhile()ループを抜けることで5秒間スリープするというわけです。「setInterval()」「setTimeout()」を利用したプログラミング手法について学んでいきます。setInterval()を使ったsleep機能を作るまずは、「setInterval()」を使ったsleep機能の作り方から見ていきましょう!setIntervalは指定ミリ秒間隔で同じメソッドの実行を繰り返すものです。例として、1秒経って起動された関数内で経過時間をカウントし、経過時間が指定秒数以上経ったときに繰り返し処理を完了するコードを書いてみましょう。待機時間の場合、待機終了。console.log('5秒経過しました!');});このように、setInterval()に1000ミリ秒を指定し、1秒間隔で「無名関数」を実行しています。無名関数では経過時間をカウントし、指定秒数経過した場合にclearInterval()でタイマーを停止し待機を完了してます。sleep()にはコールバック関数を与えており、指定秒数経過したあとすぐに実行される仕組みです。このコールバック関数はメインの処理とは別に並列で実行されるため待機することが無いのが特徴です。「setInterval()」の使い方については、下記の記事で詳しく解説しているのでぜひ参考にしてください。1秒後に起動された関数内で経過時間をカウントし、再びsetTimeoutで同じ関数を登録します。これで、1秒ごとに繰り返し同じ関数が呼び出されます。その後、カウントしている経過時間が指定秒数以上経ったときに繰り返し処理を完了します。console.log('5秒経過しました!');});以上のように、setTimeout()に1000ミリ秒を指定して1秒後にwaitFunc()を実行しています。呼び出されたwaitFunc()内にて再びwaitFunc()をsetTimeout()に登録しています。()が呼び出されます。waitFunc()では経過時間をカウントし、指定秒数経過した場合にclearTimeout()でタイマーを停止して待機を完了してます。setTimeoutについてもっと詳しく知りたい方は、下記の記事も参考にしてみてください。2019年1月25日Promiseでsleep機能を作るsleep機能を実現する別の方法として、ECMAJavaScript2015(ES6)から導入されたPromiseを使う方法があります。Promiseは、コールバック関数を受け取り、引数を渡してコールバック関数を実行します。コールバック関数内でPromiseのresove()メソッドを呼び出すとPromiseが正常終了します。このコールバック関数内でsetTimeoutにresolveメソッドを登録しておきます。async修飾子を使って非同期関数を宣言します。await句を使って、Promiseの非同期処理が完了するまで待機します。done!Promiseはawait句を使って呼び出されると、処理はPromiseが完了するまで待機します。wait()には、async修飾子をつけているため、メインの処理とは並列に実行されます。wait()内ではPromiseの待機はawaitにより可能になります。実行結果をみてみると、wait()呼び出しによるメイン処理の待機はできていません。これは、async修飾子によりwait()がメイン処理と並列に実行されるからです。Promiseはawaitを使って待機しています。これはメイン処理とは別個に並列処理されているなかでの待機です。その後、setTimeoutにより5秒後にresolve()が実行されてます。done!"と表示されています。Promiseがどのようなものなのか、どのように使うのかは下記の記事で詳しく解説しています。気になる方は、ぜひ参考にしてください。>>初心者のためのPromise使い方まとめjQueryでsleep機能を作るjQueryは、JavaScriptのライブラリのひとつです。普通のJavaScriptでできる動きが色々まとめられており、初心者にも扱いやすいものとなっています。jQueryを使うためには、jQuery自体を読み込む必要があります。読み込み方については、下記の記事で詳しく解説しているのでぜひ参考にしてみてください。2019年5月28日このjQueryの場合、Deferredオブジェクトを使うことでsleep機能を実装できます。DeferredオブジェクトはPromiseを返します。そのまま待機時間完了後にresolve()メソッドを実行すると、Deferredの処理が完了し、次の処理としてメソッドチェーンで繋いでいるdone()メソッドが実行されます。jQueryのDeferredを作成します。sec秒後に、resolve()を実行して、Promiseを完了します。waitはPromiseを返すので、doneをメソッド・チェーンできます。spaned!以上のようにwait()で5秒待機するよう指定すると、指定時間後にPromiseオブジェクトが返されるため、メソッドチェーンにてdone()メソッドを実行できます。done()メソッドに無名関数を与えると、5秒後に実行されます。このwait()による待機もメイン処理とは並列に行なわれます。Promiseによる非同期処理とタイマー処理を組み合わせることで、とても効率よく処理を記述することが可能です。})}これは単純に指定時間経過後にPromiseの「resolve」だけを返すという処理になっています。sleep(5000)」と記述することで、引数に指定したミリ秒が経過するまで処理を一時停止するというわけです。指定時間経過後は「resolve」が返ってくるので、そのまま次の処理に移行することになります。2019年6月11日まとめいかがでしたか?JavaScriptにはsleep関数はありません。ビジーwaitやsetInterval、setTimeout、Primise、jQueryなどを使用することにより、sleepの機能を実現することが可能です。ビジーwait以外はメイン処理とは並列に実行されるサブ処理であり、メイン処理は待機しないことをお忘れなく。sleep機能はプログラムの処理フローを制御する場合によく使用する機能です。うっかり忘れてしまったら、またこの記事で確認してみてくださいね!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。輝昌こんにちは!貝原(@touhicomu)と申します。現在は、Web業界のフリーランスとして、主にPHP/WordPress/BuddyPress/VPSサーバー構築などの業務を受注しています。現住所は、日本の西海岸、長崎県は波佐見町です。ボランティアでほたる撮影会やそば塾などのスタッフとして参加させて頂いています。以下の活動も行っています。