JavaScript タイマーの発見

JavaScript コードを作成する際に、関数の実行を遅延させたい場合があります。

これはsetTimeoutの役割です。後で実行するコールバック関数と、その実行を遅らせる時間をミリ秒単位で指定します。

setTimeout(() => {
  // 2秒後に実行
}, 2000)
setTimeout(() => {
  // 50ミリ秒後に実行
}, 50)

この構文は新しい関数を定義します。そこに任意の他の関数を呼び出したり、既存の関数名とパラメータのセットを渡すことができます。

const myFunction = (firstParam, secondParam) => {
  // 何らかの処理を行う
}
// 2秒後に実行
setTimeout(myFunction, 2000, firstParam, secondParam)

setTimeoutはタイマー ID を返します。これは一般的に使用されませんが、この ID を保存して、スケジュールされた関数の実行を削除したい場合はクリアできます。

const id = setTimeout(() => {
  // 2秒後に実行されるはず
}, 2000)
// 考えを変えた
clearTimeout(id)

ゼロ遅延

タイムアウト遅延を 0 に指定すると、コールバック関数は現在の関数の実行後できるだけ早く実行されます。

setTimeout(() => {
  console.log('after ')
}, 0)
console.log(' before ')

このコードは以下を出力します。

bash

before
after

これは、集中的なタスクで CPU をブロックすることを避け、重い計算を実行中に他の関数が実行されるように、スケジューラに関数をキューイングするのに特に役立ちます。

TIP

一部のブラウザ（IE と Edge）は、この同じ機能を実行するsetImmediate()メソッドを実装していますが、これは標準ではなく、他のブラウザでは使用できません。ただし、Node.js では標準関数です。

setIntervalはsetTimeoutと似た関数ですが、違いがあります。コールバック関数を 1 回実行する代わりに、指定した時間間隔（ミリ秒単位）で永遠に実行します。

setInterval(() => {
  // 2秒ごとに実行
}, 2000)

上記の関数は、setIntervalが返した間隔 ID を渡してclearIntervalを使用して停止するように指示しない限り、2 秒ごとに実行されます。

const id = setInterval(() => {
  // 2秒ごとに実行
}, 2000)
// 考えを変えた
clearInterval(id)

setIntervalコールバック関数内でclearIntervalを呼び出して、再度実行するか停止するかを自動的に判断させるのが一般的です。たとえば、このコードは、App.somethingIWait の値が arrived になるまで何かを実行します。

setInterval は、関数が実行を終えたかどうかを考慮せずに、n ミリ秒ごとに関数を開始します。

関数が常に同じ時間だけかかる場合は、問題ありません。

しかし、関数の実行時間は、ネットワーク状況によっては異なる場合があります。

そして、長い実行時間が次の実行と重なる可能性があります。

これを回避するために、コールバック関数が終了したときに呼び出される再帰的な setTimeout をスケジュールできます。

const myFunction = () => {
  // 何らかの処理を行う
  setTimeout(myFunction, 1000)
}
setTimeout(myFunction, 1000)

setTimeout と setInterval は、タイマーモジュールを通じて Node.js で利用できます。

Node.js は、setTimeout(() => {}, 0) を使用するのと同等の setImmediate() も提供しており、主に Node.js イベントループで動作するために使用されます。