JavaScriptタイミングイベント:setTimeoutおよびsetInterval

プログラマーは、タイミングイベントを使用して、特定のコードの実行を遅らせたり、特定の間隔でコードを繰り返したりします。

2つのネイティブの機能は、これらのタスクを達成するために使用されるJavaScriptライブラリでありますsetTimeout()setInterval()

setTimeout

setTimeout() 渡された関数の実行を指定された時間だけ遅らせるために使用されます。

渡すパラメーターは2つあります。setTimeout()呼び出したい関数と、関数の実行を遅らせるためのミリ秒単位の時間です。

1秒には1000ミリ秒(ms)があるため、5000ミリ秒は5秒に相当することに注意してください。

setTimeout() 指定された時間が経過した後、最初の引数から関数を1回実行します。

例:

let timeoutID; function delayTimer() { timeoutID = setTimeout(delayedFunction, 3000); } function delayedFunction() { alert(“Three seconds have elapsed.”); }

ときにdelayTimer関数が呼び出されると、それが実行されますsetTimeout。3秒(3000ミリ秒)が経過すると実行さdelayedFunctionれ、アラートが送信されます。

setInterval

setInterval()実行間の時間遅延で繰り返す関数を指定するために使用します。

ここでも、2つのパラメーターが渡されsetInterval()ます。呼び出したい関数と、関数の各呼び出しを遅らせるためのミリ秒単位の時間です。

setInterval() クリアされるまで実行を続けます。

例:

let intervalID; function repeatEverySecond() { intervalID = setInterval(sendMessage, 1000); } function sendMessage() { console.log(“One second elapsed.”); }

コードが関数を呼び出すと、repeatEverySecond実行されますsetIntervalsetInterval関数はsendMessage毎秒(1000ミリ秒)実行されます。

clearTimeoutおよびclearInterval

タイミングイベントを停止するための対応するネイティブ関数もあります:clearTimeout()およびclearInterval()

上記の各タイマー関数が変数に保存されていることに気付いたかもしれません。setTimeoutまたはsetInterval関数のいずれかが実行されると、この変数に保存される番号が割り当てられます。JavaScriptはこれをすべてバックグラウンドで実行することに注意してください。

この生成された番号は、タイマーのインスタンスごとに一意です。この割り当てられた番号は、タイマーを停止するときにタイマーを識別する方法でもあります。このため、タイマーは常に変数に設定する必要があります。

あなたのコードを明確にするために、あなたは常に一致する必要がありますclearTimeout()setTimeout()してclearInterval()までsetInterval()

タイマーを停止するには、対応するクリア関数を呼び出して、停止するタイマーと一致するタイマーID変数を渡します。構文のためclearInterval()clearTimeout()同じです。

例:

let timeoutID; function delayTimer() { timeoutID = setTimeout(delayedFunction, 3000); } function delayedFunction() { alert(“Three seconds have elapsed.”); } function clearAlert() { clearTimeout(timeoutID); }