JavaScriptのsetTimeout・clearTimeoutとは?指定時間後に処理を実行するタイマーの使い方
setTimeout() は、指定した時間が経過した後に一度だけ処理を実行するためのメソッドです。
また、clearTimeout() を使うことで、設定したタイマーを解除できます。
時間はミリ秒(1秒=1000ミリ秒)で指定します。
setTimeoutメソッドとは?
setTimeout() は、指定した時間が経過した後に関数を1回だけ実行します。
書式:
使用例:3秒後に関数を実行
→ 3秒後に msg() が1回だけ実行されます。
clearTimeoutメソッドとは?
clearTimeout() は、setTimeout() で設定したタイマーを解除するメソッドです。
タイマーを解除するには、setTimeout() の戻り値(タイマーID)を変数に保存しておく必要があります。
使用例:設定したタイマーを解除
→ timer1 に設定されたタイマーが実行されなくなります。
実際のサンプル:ボタンでタイマー開始・停止
let timer;
function startTimer() {
timer = setTimeout(() => alert(‘3秒経過しました’), 3000);
}
function stopTimer() {
clearTimeout(timer);
alert(‘タイマーを解除しました’);
}
</script>
<button onclick=”startTimer()”>タイマー開始</button>
<button onclick=”stopTimer()”>タイマー停止</button>
→ タイマーの仕組みが直感的に理解できます。
setTimeoutとclearTimeoutのポイント
setTimeout()は指定時間後に1回だけ実行- 繰り返し処理したい場合は
setInterval()を使用 clearTimeout()でタイマーを解除可能- タイマーIDを変数に保存しておく必要がある