JavaScript时间事件：setTimeout和setInterval

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

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);
}