JavaScript定时器setTimeout()和setInterval()详解

JavaScript定时器详解：setTimeout()与setInterval()的使用与理解

本文将为大家详细介绍JavaScript中的定时器函数setTimeout()和setInterval()，通过实例帮助大家深入理解这两个函数的使用方法和特点。

一、超时调用setTimeout()

顾名思义，超时调用就是在指定的时间后执行函数或代码。setTimeout()函数接受两个参数：

1. 要执行的函数或代码。

2. 毫秒数（在执行代码之前要等待的时间）。

示例：

```javascript

function test(){

alert("孙悟空");

}

setTimeout(test, 2000); // 2秒后弹出 "孙悟空"

```

我们还可以使用clearTimeout()函数来取消尚未执行的setTimeout()调用。

示例：

```javascript

var timer = function test(){

alert("孙悟空");

}

setTimeout(test, 2000); // 2秒后弹出 "孙悟空"

clearTimeout(timer); // 取消定时器，因为前者在两秒后调用，调用之前已经取消相当于什么也没发生。

```

二、间歇调用setInterval()

间歇调用就是指定的时间内不断地重复执行代码。setInterval()也接受两个参数，与setTimeout()相同。

示例：

```javascript

function test(){

alert("孙悟空");

}

setInterval(test, 2000); // 每隔2秒弹出一次 "孙悟空"

```

使用clearInterval()可以清除间歇调用的定时器。下面是一个例子，当累加变量num达到最大值时，清除定时器并弹出提示框。

示例：

```javascript

var num = 0;

var max = 10;

function test(){

num++;

if (num == max){

clearInterval(timer); //累加到10时清除定时器。alert("这里有"+num+"个孙悟空")； //这里有10个孙悟空。 。 } } timer=setInterval(test,500); 接下来是另一个例子，使用超时调用来实现累加变量的递增并弹出提示框：var num=0; var max=10; function test(){ num++; if (num