Programmers use timing events to delay the execution of certain code, or to repeat code at a specific interval.

程序員使用時序事件來延遲某些代碼的執行，或以特定的時間間隔重復代碼。

There are two native functions in the JavaScript library used to accomplish these tasks: setTimeout() and setInterval().

JavaScript庫中有兩個用于完成這些任務的本機函數： setTimeout()和setInterval() 。

setTimeout (setTimeout)

setTimeout() is used to delay the execution of the passed function by a specified amount of time.

setTimeout()用于將傳遞的函數的執行延遲指定的時間。

There are two parameters that you pass to setTimeout(): the function you want to call, and the amount of time in milliseconds to delay the execution of the function.

傳遞給setTimeout()參數有兩個：要調用的函數，以及延遲該函數執行的時間(以毫秒為單位)。

Remember that there are 1000 milliseconds (ms) in a 1 second, so 5000 ms is equal to 5 seconds.

請記住，一秒內有1000毫秒(ms)，因此5000毫秒等于5秒。

setTimeout() will execute the function from the first argument one time after the specified time has elapsed.

在指定的時間過去之后， setTimeout()將從第一個參數開始執行函數。

Example:

例：

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

When the delayTimer function is called it will run setTimeout. After 3 seconds (3000 ms) pass, it will execute delayedFunction which will send an alert.

調用delayTimer函數時，它將運行setTimeout 。 經過3秒鐘(3000毫秒)后，它將執行delayedFunction ，它將發送警報。

setInterval

setInterval

Use setInterval() to specify a function to repeat with a time delay between executions.

使用setInterval()可以指定一個函數，該函數在兩次執行之間會有時間延遲。

Again, two parameters are passed to setInterval(): the function you want to call, and the amount of time in milliseconds to delay each call of the function .

同樣，將兩個參數傳遞給setInterval() ：您要調用的函數，以及延遲該函數每次調用的時間(以毫秒為單位)。

setInterval() will continue to execute until it is cleared.

setInterval()將繼續執行，直到將其清除。

Example:

例：

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

When your code calls the function repeatEverySecond it will run setInterval. setInterval will run the function sendMessage every second (1000 ms).

當您的代碼調用函數repeatEverySecond ，它將運行setInterval 。 setInterval將每秒(1000 ms)運行一次sendMessage函數。

clearTimeout和clearInterval (clearTimeout and clearInterval)

There are also corresponding native functions to stop the timing events: clearTimeout() and clearInterval().

還有相應的本機函數來停止計時事件： clearTimeout()和clearInterval() 。

You may have noticed that each timer function above is saved to a variable. When either the setTimeout or setInterval function runs, it is assigned a number which is saved to this variable. Note that JavaScript does this all in the background.

您可能已經注意到上面的每個計時器功能都保存到一個變量中。 當setTimeout或setInterval函數運行時，將為其分配一個數字，該數字將保存到該變量中。 請注意，JavaScript會在后臺完成所有操作。

This generated number is unique for each instance of timers. This assigned number is also how timers are identified when you want to stop them. For this reason, you must always set your timer to a variable.

對于每個計時器實例，此生成的編號都是唯一的。 當您要停止計時器時，此分配的編號也是如何標識計時器的。 因此，您必須始終將計時器設置為變量。

For clarity of your code, you should always match clearTimeout() to setTimeout() and clearInterval() to setInterval().

為了使代碼清晰，應始終將clearTimeout()與setTimeout()匹配，并將clearInterval()與setInterval()匹配。

To stop a timer, call the corresponding clear function and pass it the timer ID variable that matches the timer you wish to stop. The syntax for clearInterval() and clearTimeout() are the same.

要停止計時器，請調用相應的清除函數，并將與您要停止的計時器相匹配的計時器ID變量傳遞給它。 clearInterval()和clearTimeout()的語法相同。

Example:

例：

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

翻譯自: https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/

總結

以上是生活随笔為你收集整理的JavaScript时间事件：setTimeout和setInterval的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。