JavaScriptでは、指定した時間後に処理を実行したい時によく使われるのがsetTimeout関数です。
しかし、setTimeout は概念も使い方も難しく、よく分かっていない方も多いのではないでしょうか？
この記事では、setTimeoutの基本的な使い方から、setIntervalとの違い、タイマーの停止方法、よくある質問まで、初心者の方にもわかりやすく丁寧に解説していきます！
- 現役のフルスタックエンジニアとして活躍中
- 開発チームリーダーとして複数プロジェクトをリード
- 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
- プログラミングスクールのカリキュラム執筆経験あり
setTimeoutの基本的な使い方
setTimeoutは次のような構文で使います。
setTimeout(関数, ミリ秒);第1引数の関数には、指定時間経過後に実行したい処理を書きます。第2引数のミリ秒は、何ミリ秒後に関数を実行するかを指定します。
例えば、3秒後にアラートを表示するには次のように書きます。
setTimeout(function() {
alert('3秒経過');
}, 3000);ポイントは次の3つです。
- ミリ秒は1000で1秒。3000ミリ秒は3秒
- 関数は「function() { }」と書く
- setTimeoutの末尾のセミコロンを忘れずに
JavaScriptは上から順番に実行されるので、setTimeoutの次の行はすぐに実行されます。
タイマーを設定した処理は、指定時間後に行われるのです。
setTimeoutとsetIntervalの違い
JavaScriptには、setTimeoutと似た関数でsetIntervalというものがあります。
この2つの違いを理解しておきましょう。
setTimeout
setTimeoutは指定時間後に1回だけ処理を実行します。
つまり、「3秒後に1回だけアラートを表示する」といった使い方です。
setInterval
setIntervalは指定時間ごとに処理を繰り返し実行します。
「3秒ごとにアラートを表示する」という場合はsetIntervalを使います。
setInterval(function() {
alert('3秒ごとに実行');
}, 3000);setIntervalは止めないと永遠に処理が繰り返されるので、必要なくなったら止める処理を書く必要があります。止め方は後ほど説明します。
setTimeoutの引数について
setTimeoutとsetIntervalには、それぞれ2つの引数を渡せます。
第1引数: 関数
第1引数の関数は文字列でも渡せますが、非推奨です。次のように書くとエラーが起きやすいので避けましょう。
// 非推奨の書き方
setTimeout("alert('アラート');", 1000);別の書き方として、事前に関数を定義しておいて、その関数名を渡す方法もあります。
function showAlert() {
alert('アラート');
}
setTimeout(showAlert, 1000);ただし、この方法だと関数に引数を渡せないので注意が必要です。無名関数を使うのが一番無難でしょう。
第2引数: 時間（ミリ秒）
第2引数は待機時間をミリ秒単位で指定します。
- 1秒は1000ミリ秒
- 1分は60秒なので60000ミリ秒
setTimeoutの使用例
実際にsetTimeoutがどのようなときに役立つか、具体例をみていきましょう。
1. 一定時間後に別ページに遷移する
ECサイトの決済完了画面などで、5秒後に自動的にトップページに戻したい時は次のように書きます。
setTimeout(function() {
location.href = 'https://example.com/';
}, 5000);2. 一定時間後にモーダルウィンドウを表示する
ページを開いてから3秒後に、お知らせなどのモーダルウィンドウを表示させるには次のようにします。
jQueryを使った例です。
setTimeout(function() {
$('#modal').show();
}, 3000)];
let current = 0;
function changeImage() {
current++;
if (current >= images.length) {
current = 0;
}
document.getElementById('slide').src = images[current];
}
setInterval(changeImage, 3000);配列imagesに画像のパスを格納し、３秒ごとにchangeImage関数を呼び出して画像を切り替えています。
タイマーの停止方法
setTimeoutやsetIntervalで開始したタイマーは、用が済んだら停止させる必要があります。
放置するとパフォーマンス低下の原因になるからです。
setTimeoutの停止
setTimeoutで設定したタイマーを停止するにはclearTimeoutを使用します。
let timerId = setTimeout(function() {
document.getElementById('result').textContent = '実行！';
}, 3000);
clearTimeout(timerId);setTimeoutの戻り値としてタイマーIDを取得し、それをclearTimeoutの引数に渡すことでタイマーをキャンセルできます。
setIntervalの停止
setIntervalの場合はclearIntervalを使います。使い方はclearTimeoutと同じです。
let timerId = setInterval(function() {
console.log('繰り返し実行');
}, 1000);
clearInterval(timerId);よくある質問
Q. 複数のsetTimeoutを順番に実行するには？
A. setTimeoutの中でsetTimeoutを呼び出すことで実現できます。
setTimeout(function() {
console.log('1つ目');
setTimeout(function() {
console.log('2つ目');
}, 1000);
}, 1000);このコードは1秒後に「1つ目」、さらに1秒後に「2つ目」とコンソールに出力します。
setTimeoutをネストすることで順次実行ができるのです。
Q. 時間の指定に0を設定するとどうなる？
A. 0ミリ秒を指定しても、すぐには実行されません。順番待ちの状態になります。
console.log('1番目');
setTimeout(function() {
console.log('2番目');
}, 0);
console.log('3番目');このコードの出力結果は次のようになります。
1番目 3番目 2番目
0ミリ秒のsetTimeoutより外側のコードが先に実行されるのです。
0を指定する使い道としては、重い処理を後回しにして画面表示を早くしたい時などに使えます。
Q. スケジュールした時間どおりに処理が実行されないのはなぜ？
A. タスクキューに追加されるだけで、すぐに実行されるわけではないからです。
setTimeoutは指定時間になったらすぐに処理を実行するのではなく、タスクキューと呼ばれる待ち行列に追加するだけです。J
avaScriptエンジンがすぐに空き状態になればその通りに実行されますが、他の処理で忙しければ遅れが生じます。
他にも遅延する理由はいくつかあります。
- 非アクティブなタブは、最小でも1秒の遅延が追加される
- バックグラウンドのタブは制限が緩和される
- setTimeoutを5回以上ネストすると、最小4ミリ秒の遅延が発生する
setTimeoutは正確なタイマーが必要な用途には向いていません。
どうしても必要なら、より精度の高いPerformance.now()などを検討しましょう。
JavaScriptを効率的に身につける勉強法は？
JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。
- JavaScript を身に付けてエンジニアになるには何をすればいい？
- 何から勉強すればいいんだろう？
- 効率よく勉強するには？
JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。
そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？
