setInterval 和 setTimeout 是 JavaScript 中常用的定时器方法,它们可以让你在指定的时间间隔后执行某个函数或计算表达式。下面我们来详细了解这两个方法的定义、用法以及如何停止它们的执行。
1. setInterval() 方法:
setInterval() 方法可以按照指定的周期(以毫秒计)来调用函数或计算表达式。它会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法:
```javascript
setInterval(code, millisec[, "lang"])
```
参数描述:
- code:必需。要调用的函数或要执行的代码串。
- millisec:必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
返回值:
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
2. clearInterval() 方法:
clearInterval() 方法可取消由 setInterval() 设置的 timeout。它接受一个参数,即由 setInterval() 返回的 ID 值。
语法:
```javascript
clearInterval(id_of_setinterval)
```
参数描述:
- id_of_setinterval:由 setInterval() 返回的 ID 值。
如何停止:
下面这个例子将每隔 50 毫秒调用 clock() 函数。您也可以使用一个按钮来停止这个 clock:
```html
function clock() {
document.getElementById("demo").innerHTML = Date();
}
var intervalID = setInterval(clock, 50); // 每隔50毫秒执行一次clock函数
function stopClock() {
clearInterval(intervalID); // 停止定时器
}
```
3. setTimeout() 方法:
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。它只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
语法:
```javascript
setTimeout(code, millisec)
```
参数描述:
- code:必需。要调用的函数后要执行的 JavaScript 代码串。
- millisec:必需。在执行代码前需等待的毫秒数。
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。其定义如下:
```javascript
clearTimeout(id_of_settimeout)
```
其中,参数 id_of_settimeout 是由 setTimeout() 返回的 ID 值,该值标识要取消的延迟执行代码块。
以下是一个使用 clearTimeout() 方法的实例:
假设我们有一个每秒调用一次 timedCount() 函数的定时消息,可以通过以下方式实现:
```html
function timedCount() {
document.getElementById("demo").innerHTML = parseInt(document.getElementById("demo").innerHTML) + 1;
setTimeout(timedCount, 1000); // 每隔一秒执行一次 timedCount 函数
}
0
// 开始计时
timedCount();
function stopTimedCount() {
clearTimeout(timedCount); // 使用 clearTimeout 取消计时器
}
```
在这个例子中,我们创建了一个名为 timedCount() 的函数,用于更新页面上的数字内容,并通过 setTimeout() 方法使其每隔一秒执行一次。当用户点击“停止计时”按钮时,会触发 stopTimedCount() 函数,使用 clearTimeout() 方法取消计时器,从而停止 timedCount() 函数的执行。