72 lines
2.5 KiB
Markdown
72 lines
2.5 KiB
Markdown
|
---
|
|||
|
|
title: Timing Events
|
|||
|
|
localeTitle: 时间事件
|
|||
|
|
---
|
|||
|
|
## 时间事件
|
|||
|
|
|
|||
|
|
程序员使用定时事件来延迟代码的执行或以指定的间隔重复代码。
|
|||
|
|
|
|||
|
|
JavaScript库中有两个用于完成这些任务的本机函数： `setTimeout()`和`setInterval()` 。
|
|||
|
|
|
|||
|
|
使用`setTimeout()`将传递函数的执行延迟指定的时间。您传递给`setTimeout()`参数有两个：您要调用的函数，以及以毫秒为单位的时间量。 （1秒内有1000毫秒（ms）。例如：5000毫秒= 5秒。） `setTimeout()`将在指定时间过后执行一次。
|
|||
|
|
|
|||
|
|
`setTimeout()`示例：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var timeoutID;
|
|||
|
|
|
|||
|
|
function delayTimer() {
|
|||
|
|
timeoutID = setTimeout(delayedFunction, 3000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function delayedFunction() {
|
|||
|
|
alert(“Three seconds have elapsed.”);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
当调用delayTimer函数时，它将运行setTimeout。经过3秒后，它将执行delayedFunction，它将发送警报。
|
|||
|
|
|
|||
|
|
使用`setInterval()`指定要在执行之间的时间延迟重复的函数。同样，两个参数传递给`setInterval()` ：您要调用的函数，以及以毫秒为单位的时间量。 `setInterval()`将继续执行，直到它被清除。
|
|||
|
|
|
|||
|
|
`setInterval()`示例：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var intervalID;
|
|||
|
|
|
|||
|
|
function repeatEverySecond() {
|
|||
|
|
intervalID = setInterval(sendMessage, 1000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function sendMessage() {
|
|||
|
|
console.log(“One second elapsed.”);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
当您的代码调用函数repeatEverySecond时，它将运行setInterval。 setInterval将每1000毫秒运行一次sendMessage函数。
|
|||
|
|
|
|||
|
|
还有相应的本机函数来停止计时事件： `clearTimeout()`和`clearInterval()` 。
|
|||
|
|
|
|||
|
|
您可能已经注意到每个计时器功能都保存到变量中。当set函数运行时，会为其分配一个保存到此变量的数字。生成的数字对于每个计时器实例都是唯一的。该分配的号码也是识别定时器停止的方式。因此，您必须始终将计时器设置为变量。
|
|||
|
|
|
|||
|
|
为了清楚你的代码，你应该总是将`clearTimeout()`与`setTimeout()`和`clearInterval()`匹配到`setInterval()` 。
|
|||
|
|
|
|||
|
|
要停止计时器，请调用相应的清除功能，并将与您要停止的计时器匹配的计时器ID变量传递给它。 `clearInterval()`和`clearTimeout()`的语法是相同的。
|
|||
|
|
|
|||
|
|
例：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var timeoutID;
|
|||
|
|
|
|||
|
|
function delayTimer() {
|
|||
|
|
timeoutID = setTimeout(delayedFunction, 3000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function delayedFunction() {
|
|||
|
|
alert(“Three seconds have elapsed.”);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function clearAlert() {
|
|||
|
|
clearTimeout(timeoutID);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
```
|