タイマーの基本 — setTimeout(()=>{}, 1000)
setTimeout は「指定した時間の後に、関数を一度だけ実行する」タイマーです。第2引数はミリ秒で指定し、例えば 1000 は 1 秒後を意味します。
基本の使い方
// 1秒後に「Hello」を表示
setTimeout(() => {
console.log("Hello");
}, 1000);
- 役割: 指定時間の経過後にコールバック関数を1回だけ実行します。時間はミリ秒指定で、1000ms = 1秒です。
- 直感例: 「3秒後に実行」なら 3000 を渡します。料理のキッチンタイマーのように「時間が来たら鳴る」イメージでOKです。
よく使うパターンとテンプレート
- ラベル：遅延実行（ロード演出や通知）
// ページ表示から2秒後にヒントを表示
setTimeout(() => {
showHint("クリックで開きます");
}, 2000);
- ラベル：連続処理の間に休憩を入れる
doStep1();
setTimeout(() => {
doStep2(); // 500ms後に次のステップ
}, 500);
- ラベル：引数を渡す
function greet(name) {
console.log(`こんにちは、${name}`);
}
setTimeout(greet, 1000, "Aki"); // 第3引数以降がコールバックの引数
- ラベル：関数を名前で渡す（可読性重視）
function onTimeout() {
console.log("時間です！");
}
setTimeout(onTimeout, 3000);
setTimeout は「一度だけ実行」、繰り返し実行したいときは
setIntervalを使います（こちらは一定間隔で繰り返し）。用途と違いを押さえると迷いません。
取り消し（キャンセル）と制御
- ラベル：タイマーIDを保持してキャンセル
- ポイント:
setTimeoutはタイマーIDを返します。clearTimeout(id)で未実行のタイマーを取り消せます。
- ポイント:
const id = setTimeout(() => {
console.log("これは取り消される予定");
}, 5000);
// 5秒待たずにキャンセル
clearTimeout(id);
- ラベル：ボタン操作で開始/停止
- ポイント: UIと組み合わせて「一定時間後の処理」をユーザー操作で制御できます。
let tid = null;
startBtn.onclick = () => {
tid = setTimeout(() => alert("5秒経過"), 5000);
};
stopBtn.onclick = () => {
if (tid) clearTimeout(tid);
};
setTimeout と setInterval の違い（押さえどころ）
- ラベル：違いの要点
- setTimeout: 指定時間後に1回だけ実行。遅延させたいときの基本選択肢。
- setInterval: 指定間隔ごとに繰り返し実行。スライドショーや自動保存などに使うが、停止には
clearIntervalが必要。
- ラベル：繰り返しは「再帰的な setTimeout」も有効
- 利点: 実行終了後に次回を予約するため、処理時間のブレに強く、詰まりにくい。
function tick() {
console.log("tick");
setTimeout(tick, 1000); // 1秒ごとに再予約
}
setTimeout(tick, 1000);
タイマーの基本と違いは入門記事でも整理されています。まず「一度だけか、繰り返しか」で選ぶとスムーズです。
ありがちなハマりポイントと対策
- ラベル：ミリ秒の勘違い
- 1000ms = 1秒。2秒は 2000、6秒は 6000。秒指定ではない点に注意。
- ラベル：キャンセルを忘れて副作用
- タイマーが生きたままだと「もう不要なのに実行」されます。画面遷移やクリーンアップ時は
clearTimeoutを必ず呼ぶ。
- タイマーが生きたままだと「もう不要なのに実行」されます。画面遷移やクリーンアップ時は
- ラベル：setTimeout と setInterval の用途混同
- 一度だけの遅延は
setTimeout、定期処理はsetInterval。用途に合わせて選び、停止処理もセットで設計。
- 一度だけの遅延は
- ラベル：非同期の理解不足
- 「すぐ実行されない」ため、後続コードは先に進みます。見た目の順序に惑わされず「時間が来たら動く」前提で設計。
練習問題（手を動かして覚える）
// 1) 3秒後に「時間です！」と表示
setTimeout(() => console.log("時間です！"), 3000);
// 2) 関数に引数を渡して1秒後に挨拶
function hello(name) { console.log(`こんにちは、${name}`); }
setTimeout(hello, 1000, "Mao");
// 3) タイマーを開始→2秒以内にキャンセル
const id = setTimeout(() => console.log("実行される？"), 2000);
setTimeout(() => clearTimeout(id), 1000); // 1秒後にキャンセル
// 4) 再帰的な setTimeout で3回だけ繰り返す
let count = 0;
function repeat() {
console.log("tick", ++count);
if (count < 3) setTimeout(repeat, 500);
}
setTimeout(repeat, 500);