JavaScriptメモ: タイマーで任意の関数を呼び出す (setTimeout, setInterval)

単発のタイマー

タイマーによる非同期な関数呼び出しには、window.setTimeout() を使用します。

function puts(text) {
  document.write(text);
}

setTimeout(() => {
  puts('*');
}, 1000);  // Call foo() after 1 second.

繰り返しのタイマー

1 回だけでなく、繰り返し関数を呼び出したい場合は window.setTimeout() の代わりに window.setInterval() を使用します。

function puts(text) {
  document.write(text);
}

setInterval(() => {
  puts('*');
}, 100);

以下のようなイディオムを使用すれば、window.setTimeout() でも繰り返しのタイマーを実現できます。

function puts(text) {
  document.write(text);
}

(function loop() {
  puts('*');
  setTimeout(loop, 100);
})();

タイマーのキャンセル

タイマーをキャンセルするには、以下の関数を使用します。

• window.clearTimeout(): window.setTimeout() のタイマーをキャンセルする
• window.clearInterval(): window.setInterval() のタイマーをキャンセルする

const id = setTimeout(() => { ... }, 5000);
clearTimeout(id);    // タイマーのキャンセル

const id = setInterval(() => { ... }, 5000);
clearInterval(id);    // タイマーのキャンセル