多くのプログラミング言語には、プログラムを一定時間待機させる「sleep」という機能がありますが、JavaScriptには sleep 機能がありません。
それでも、JavaScript を使っていると一定時間待ってから処理を実行したいときもありますよね。
しかし、心配はいりません。
JavaScriptでsleep機能を実装する方法があります！
しかも、jQuery などの他ライブラリを使う必要もありません。
この記事では、JavaScriptでプログラムを一定時間待機させる方法、つまり独自のsleep機能を作る方法を初心者にもわかりやすく解説します。
また、よく登場する「setTimeout」や「Promise」など、初見では難しい機能もかみ砕いて説明しています。
最後まで読んで、より実践的に JavaScript を使えるようになりましょう！
sleep（スリープ）機能とは？
スリープ機能とは、プログラムが一時的に動作を停止することを指します。
これは、プログラムが同じ操作を何度も繰り返すループ処理や、複数の処理を同時に行うマルチスレッド処理の際に特に重要です。
スリープを利用することで、プログラムは一時的に休息を取り、その間にコンピュータのCPUの負荷を軽減します。
例えば、ウェブページがサーバーからのデータを待つときや、アニメーションの間隔を調整する際に役立ちます。
注意点：JavaScriptではsleepを1行で書けない
JavaScriptにはPythonやJavaなど他の言語にあるような組み込みのsleepメソッドが存在しません。
JavaScriptでスリープのような機能を実現するためには、別の方法を利用して擬似的にプログラムを一時停止させる必要があります。
JavaScriptでの一定時間処理を待つための知識
JavaScriptで特定の時間待ってから処理を行う方法には、いくつか JavaScript の既存機能を使う方法があります。
- setTimeout
- setInterval
- Promise
- async/await
これらの機能を使うと、プログラムに一時停止や繰り返し処理、非同期処理を加えることができます。
setTimeoutについて
setTimeoutとは
setTimeoutは、指定した時間（ミリ秒単位）が経過した後、一度だけ特定の処理を実行する関数です。
例えば、メッセージを少し遅れて表示させたい時に使います。
setTimeoutの使い方
setTimeout(function() {
console.log("これは3秒後に表示されます");
}, 3000);このコードは、3秒待ってから「これは3秒後に表示されます」というメッセージを出力します。
setIntervalについて
setIntervalとは
setIntervalは、一定の時間間隔（ミリ秒単位）ごとに処理を繰り返し実行する関数です。
定期的に何かを行いたい時に便利です。
setIntervalの使い方
let count = 0;
const interval = setInterval(function() {
console.log("1秒ごとに表示");
count++;
if (count === 5) {
clearInterval(interval);
}
}, 1000);この例では、1秒毎にメッセージを出力し、5回繰り返した後に停止します。
setTimeoutとsetIntervalの違い
setTimeoutは一回だけ処理を行いますが、setIntervalは指定した間隔で繰り返し処理を行います。
一時的な遅延にはsetTimeout、定期的な処理にはsetIntervalが向いています。
Promiseについて
Promiseとは
Promiseは、非同期操作が成功したか失敗したかを表すオブジェクトです。
複数の非同期処理を管理したり、連鎖させる時に使います。
慣れていないと難しいかと思いますので、ここでは雰囲気だけ掴んでいただければ大丈夫です！
Promiseの使い方
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("成功");
}, 2000);
});
myPromise.then((message) => {
console.log(message); // これは2秒後に「成功」と表示します
});async/awaitについて
async/awaitとは
async/awaitは、非同期処理をより読みやすく書くための構文です。
Promiseを使って非同期処理を行う時に便利です。
async/awaitの使い方
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function demo() {
console.log("処理開始");
await sleep(3000);
console.log("3秒後に表示");
}
...このコードは、「処理開始」と表示してから3秒待ち、「3秒後に表示」と出力します。
JavaScriptで一定時間処理を待つsleepを実装する方法
JavaScriptでsleep機能を実装する方法は、大きく分けて4つあります。
ここでは、「3秒後にメッセージを表示する」という処理を例に、それぞれの方法を紹介します。
1. setTimeoutを使ったsleepの実装
setTimeoutを使ったsleepの実装は、一定時間後に一度だけ処理を実行する方法です。
以下の例では、3秒後にメッセージを表示します。
function sleepSetTimeout(ms, callback) {
setTimeout(callback, ms);
}
function demo() {
console.log("処理開始");
sleepSetTimeout(3000, () => console.log("3秒後に表示"));
}
demo();この例では、setTimeoutを使って3秒後にメッセージを表示することができます。
2. setIntervalを使ったsleepの実装
setIntervalを使ったsleepの実装は、一定の間隔で処理を繰り返し実行し、指定した回数が終わったら停止する方法です。
先ほどの setTimeout を使ったsleepの実装を setInterval を使ったsleepの実装に書き換えると以下のようになります。
function sleepSetInterval(ms, callback, count) {
let i = 0;
const interval = setInterval(() => {
callback();
i++;
if (i === count) {
clearInterval(interval);
}
}, ms);
}
function demo() {
console.log("処理開始");
sleepSetInterval(3000, () => console.log("3秒後に表示"), 1);
}
demo();この例では、setIntervalを使って3秒後にメッセージを表示することができます。
setTimeOutとsetIntervalの違いは、setTimeOutは一度だけ処理を実行するのに対し、setIntervalは指定した間隔で繰り返し処理を行う点です。
そのため、一定時間だけ待ってから処理を行う場合はsetTimeOutを、一定時間ごとに処理を行う場合はsetIntervalを使うのが適しています。
3. Promiseを使ったsleepの実装
Promiseを使用したsleepの実装は、new Promise構文を利用して非同期処理を行う方法です。
以下の例では、setTimeoutを使って非同期処理をPromise内で実行し、指定された時間が経過したら処理を完了させます。
function sleepPromise(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
sleepPromise(3000).then(() => {
console.log("3秒後に表示");
});Promiseを使ったsleepの実装は、setTimeoutを使ったsleepの実装とほぼ同じです。
setTimeoutを使ったsleepの実装では、setTimeoutの第二引数にコールバック関数を渡していましたが、Promiseを使ったsleepの実装では、thenメソッドを使ってコールバック関数を渡しています。
初心者にとって Promise は少し難しいかもしれませんが、Promise を使ったsleepの実装は、非同期処理を連鎖させたい場合に便利です。
4. async/awaitを使ったsleepの実装
async/awaitは、非同期処理をより直感的に扱える構文です。
既にsetTimeoutを使ったPromiseベースのsleep関数を定義していますので、それをawaitキーワードとともに使用します。
以下の例では、3秒待ってからメッセージを表示します。
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function demo() {
await sleep(3000);
console.log("3秒後に表示");
}この例では、awaitキーワードを使って3秒待ってからメッセージを表示することができます。
見ていただくと分かる通り Promise を使ったsleepの実装とほぼ同じですが、awaitキーワードを使うことで、より直感的に非同期処理を扱うことができます。
それぞれの実装方法の比較
同じことを実現するために、4つの方法がありますが、それぞれの特徴をまとめると以下のようになります。
setTimeoutの利用
- 特徴: 一定時間後に一度だけ関数を実行
- 使用シーン: 単発の遅延が必要な場合
- メリット: 簡単で理解しやすく、基本的なタイマー機能として使いやすい
- デメリット: 繰り返し処理には向いていない
setIntervalの利用
- 特徴: 定期的に関数を繰り返し実行
- 使用シーン: 一定間隔で繰り返し処理が必要な場合
- メリット: 定期的な処理や、繰り返しのタイマー機能に適している
- デメリット: 停止条件の管理が必要であり、処理が終了したら明示的に停止させる必要がある
Promiseの利用
- 特徴: 非同期処理の成功または失敗を扱う
- 使用シーン: 複数の非同期処理を連鎖させたい場合
- メリット: エラーハンドリングが簡単
- デメリット: 書き方が少し複雑になる
async/awaitの利用
- 特徴: 非同期処理を同期的に書ける
- 使用シーン: 複数の非同期処理を直列に処理したい場合
- メリット: コードが直感的で読みやすい
- デメリット: Promiseと同様に書き方が少し複雑になる
まとめ：初心者におすすめなのは「setTimeout」を使った sleep
JavaScriptで処理を一定時間遅延させる方法はいくつかありますが、初心者にはsetTimeoutを使った方法がおすすめです。
function sleepSetTimeout(ms, callback) {
setTimeout(callback, ms);
}
function demo() {
console.log("処理開始");
sleepSetTimeout(3000, () => console.log("3秒後に表示"));
}
demo();setTimeoutはコードがシンプルで直感的なため、非同期処理の基本的な概念を理解しやすいです。
この関数は、指定した時間が経過した後に一度だけ特定の処理を実行するため、単純な遅延やタイマーの機能を学ぶのにもおすすめです！
おまけ：1行で書けるsleep関数
setTimeoutを使ったsleep関数は、以下のように1行で書くこともできます。
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));この関数は、以下のように使うことができます。
async function demo() {
console.log("処理開始");
await sleep(3000);
console.log("3秒後に表示");
}この関数は、async/awaitを使って非同期処理を同期的に書くことができます。
慣れていないと1行で書かれたコードは読みにくいかもしれませんが、async/awaitを使うことで、非同期処理を同期的に書くことができます。
「こういった書き方もあるんだな」ということを知っておくと、より高度なJavaScriptプログラミングを学ぶことができます。
JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！
この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。
そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？
JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。
おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。
現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！
