JavaScript のタイマー

setTimeout() 指定したタイムアウト時間経過後に関数を呼び出す

setTimeout(function, [delay], [arg1, arg2, ...]) 関数を使うと、引数 delay (ミリ秒) で指定した時間経過後に、第一引数の関数を呼び出します。

戻り値はタイムアウトID を返します。タイムアウトID を clearTimeout() 関数に渡すとタイムアウトがキャンセルされ、指定時間後に関数が呼び出されません。

setTimeout(() => console.log('Hello'), 3000)
// (3秒後) Hello

引数 delay の後ろに続けて、パラメータを可変個数セットして、タイムアウト後に呼び出される関数に渡すこともできます。

setTimeout((s) => console.log(s), 3000, 'Hello!')
// (3秒後) Hello!

clearTimeout(timeoutID) は引数に、 setTimeout() が返すタイムアウトIDを受け取り、指定したタイムアウトを取り消します。

const timeoutID = setTimeout(() => console.log('Hello'), 500)
clearTimeout(timeoutID)
// Hello は出力されない

setInterval(function, [delay], [arg1, arg2, ...]) 関数を使うと、引数 delay (ミリ秒) で指定した時間経過毎に繰り返し、第一引数の関数を呼び出します。

戻り値はインターバルID を返します。インターバルID を clearInterval() 関数に渡すと setInterval() による関数の呼び出しがキャンセルされます。

1秒おきに時刻を表示するには、次のようにします。

<span id="clock"></span>

const clock = document.getElementById('clock')
const intervalID = setInterval(() => {
  clock.innerHTML = (new Date()).toString()
}, 1000)

引数 delay の後ろに続けパラメータを可変個数セットして、コールバック関数へ引数を渡すこともできます。

clearInterval(intervalID) は引数に、 setInterval() が返すインターバルIDを受け取り、 setInterval() による繰り返しの呼び出しを終了します。