【JavaScriptのタイマー処理】setTimeoutとclearTimeoutの使い方！

JavaScriptでは一定時間後に処理を実行したいときによく使うのがsetTimeoutです。そして、その実行を取り消すときにはclearTimeoutを使います。

この記事では、setTimeoutとclearTimeoutについて、以下の内容をサンプルコードを用いてわかりやすく解説します。

setTimeoutとは？
- setTimeoutの構文
- setTimeoutのサンプルコード
clearTimeoutとは？
- clearTimeoutの構文
- clearTimeoutのサンプルコード
setTimeoutとsetIntervalの違い

setTimeoutとは？

setTimeoutは、指定した時間が経過した後に1回だけ処理を実行する関数です。

例えば、

ページ表示後に1秒遅らせてメッセージを出す
ローディング中に3秒待ってから次の処理に進む

といった場合に使います。

setTimeoutの構文

const timeoutId = setTimeout(function, delay, arg1, arg2, ...);

function → 実行したい関数または無名関数。delayミリ秒後に1回だけ実行される。
delay → 実行までの待ち時間（ミリ秒単位。1000ミリ秒 = 1秒）。指定されなかった場合の既定値は0ミリ秒。
arg1, arg2, ... → 関数に渡す引数（省略可）
timeoutId → 後で停止させるときに使うID（clearTimeoutを使う場合に必要）

setTimeoutのサンプルコードを以下に示します。

setTimeout(() => {
  console.log('1秒後に1回だけ実行されます');
}, 1000);

// ログ（1秒後） ↓
// 1秒後に1回だけ実行されます

上記のサンプルコードでは、1000ミリ秒（1秒）後にconsole.log('1秒後に1回だけ実行されます')を実行しています。

clearTimeoutとは？

clearTimeoutは、setTimeoutで登録した処理をキャンセルする関数です。setTimeoutが返すID（例: timeoutId）をclearTimeoutに渡すことで、登録した処理をキャンセルすることができます。

たとえば、ユーザーが何らかの操作をして待機処理が不要になった場合、clearTimeoutを使って無駄な実行を防ぎます。

clearTimeoutの構文

clearTimeout(timeoutId);

timeoutId → setTimeoutが返したID

clearTimeoutのサンプルコードを以下に示します。

const timeoutId = setTimeout(() => {
  console.log('3秒後に1回だけ実行されます');
}, 3000);

// 1秒後にタイマーをキャンセル
setTimeout(() => {
  clearTimeout(timeoutId);
  console.log('タイマーをキャンセルしました');
}, 1000);

// ログ（1秒後） ↓
// タイマーをキャンセルしました

上記のサンプルコードでは、3000ミリ秒（3秒）にconsole.log('3秒後に1回だけ実行されます')が実行される予定でしたが、1秒後にclearTimeoutが呼ばれているので、setTimeoutで登録した処理がキャンセルされ、console.log('タイマーをキャンセルしました')が実行されます。そのため、console.log('3秒後に1回だけ実行されます')は実行されません。

setTimeoutとsetIntervalの違い

setTimeoutと似た関数にsetIntervalがあります。これらの違いは、指定した時間が経過した後に「1回だけ実行するか（setTimeout）」「繰り返し実行するか（setInterval）」という点です。

項目	setTimeout	setInterval
処理の回数	1回だけ実行	繰り返し実行
処理の間隔	指定時間後に1回だけ実行	毎回一定の間隔で実行
停止の方法	`clearTimeout(timeoutId)`	`clearInterval(intervalId)`

setIntervalのサンプルコードを以下に示します。

setInterval(() => {
  console.log('繰り返し実行');
}, 1000);