JavaScriptのsetTimeoutの使い方を初心者向けに解説!具体例のコード付き

当サイトでは一部リンクに広告が含まれています
アイキャッチ

JavaScriptでは、指定した時間後に処理を実行したい時によく使われるのがsetTimeout関数です。

しかし、setTimeout は概念も使い方も難しく、よく分かっていない方も多いのではないでしょうか?

この記事では、setTimeoutの基本的な使い方から、setIntervalとの違い、タイマーの停止方法、よくある質問まで、初心者の方にもわかりやすく丁寧に解説していきます!

この記事を書いた人
筆者のプロフィールアイコン
  • 未経験からWebエンジニアとして転職成功(年収 30% アップ)
  • 現役のフルスタックエンジニアとして活躍中
  • 開発チームリーダーとして複数プロジェクトをリード
  • 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
目次

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に画像のパスを格納し、3秒ごとに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 はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。



おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。

現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています!

目次