点此查看所有教程、项目、源码导航

1. 背景

前面我们学习了 location、history、navigator，这些都是用来读取、控制浏览器信息的对象。

这一节我们学习 BOM 里非常常用的定时器，定时器也是 window 自带的方法，属于 BOM 的能力。

定时器的作用：让代码不要立刻执行，等待一段时间之后再执行；或者每隔一段时间自动重复执行。

我们平时网页里的倒计时、轮播图自动切换、定时刷新，底层都是定时器。

补充：定时器不是 JS 语言本身（ES）的语法，是浏览器提供的 API，Node.js 里面也有类似定时器，但是属于平台提供的能力。

2. 延时定时器 setTimeout

setTimeout 是延时定时器：等待指定时间，代码只执行一次。
单位：毫秒（1 秒 = 1000 毫秒）

2.1 基础语法

setTimeout 的第一个参数，要求传入一个函数，这个函数里面放我们想要延时执行的代码。

我们可以先单独定义一个函数，再把函数名传给 setTimeout，这种写法更好理解：

// 1. 先单独定义好函数functionsayHello(){console.log("3秒之后打印这句话");}// 2. 把函数名传给setTimeout，第二个参数是等待的毫秒数vartimerId=setTimeout(sayHello,3000);

注意：这里写sayHello，不要写成sayHello()。加括号代表立刻调用函数；只写函数名，是把函数交给定时器，等时间到浏览器再去执行。

上面这种写法，是先把函数单独抽出来，逻辑清晰。

如果这个函数只需要在这里使用一次，我们也可以不单独起名，直接在参数位置写匿名函数，效果完全一样：

vartimerId=setTimeout(function(){console.log("3秒之后打印这句话");},3000);

执行流程：代码走到这里，不会卡住等待，继续往下执行其他代码；等到时间到了，才会执行里面的函数。

重点：定时器不会阻塞后面代码运行，这和 alert、confirm 弹窗不一样。弹窗是阻塞代码，定时器是异步安排任务。

2.2 取消延时定时器 clearTimeout

setTimeout 会返回一个数字编号，我们一般叫定时器 id，把 id 保存到变量里，就可以用 clearTimeout 取消它。

如果在时间到之前取消，里面的函数就不会执行了。

functionsayHello(){console.log("这句话不会打印");}vartimerId=setTimeout(sayHello,3000);// 取消定时器clearTimeout(timerId);

3. 循环定时器 setInterval

setInterval 是循环定时器：每隔固定时间，重复执行函数，不会自动停止。

3.1 基础语法

同样，我们优先看有名函数的写法，方便理解：

functionprintLog(){console.log("每隔1秒打印一次");}vartimerId=setInterval(printLog,1000);

熟悉之后，也可以直接写匿名函数：

vartimerId=setInterval(function(){console.log("每隔1秒打印一次");},1000);

只要页面不关闭、不手动取消，它会一直循环执行。

3.2 取消循环定时器 clearInterval

循环定时器如果不关闭，会一直跑，非常容易造成性能问题，所以需要的时候一定要手动停止。

varcount=0;functionaddCount(){count=count+1;console.log(count);if(count>=5){// 满足条件，停止循环clearInterval(timerId);}}vartimerId=setInterval(addCount,1000);

4. 两个定时器的对比

• setTimeout：等一段时间，执行一次，用 clearTimeout 取消
• setInterval：每隔一段时间，重复执行，用 clearInterval 取消
• 它们都是 window 的方法，完整写法 window.setTimeout、window.setInterval，window 可以省略
• 第二个参数都是毫秒，1000 = 1 秒

5. 入门阶段重要注意点

5.1 时间只是预期时间，不是绝对精准

浏览器很忙的时候，定时器里面的代码可能会稍微晚一点执行，入门阶段我们先不用深究，知道它不会绝对精准即可。

5.2 定时器里面的函数，不会立刻执行

JS 代码是从上往下跑，定时器只是 “登记一个任务”，登记完直接继续向后执行，不会原地等待。
举个例子：

console.log("第一行");functiontest(){console.log("延时2秒");}setTimeout(test,2000);console.log("最后一行");

打印顺序：第一行 → 最后一行 → 延时 2 秒。

5.3 不要忘记保存定时器 id，否则无法取消

想要停止定时器，必须拿到它返回的 id；如果不保存 id，后面就没办法停止这个定时器。

5.4 不要随便开启大量循环定时器

定时器开多了，会不停重复执行代码，占用浏览器资源，页面会变卡。用完及时关闭是好习惯。

6. 实战案例：页面倒计时

需求：页面上展示倒计时，从 10 开始倒数，每秒数字减 1，到 0 的时候停止倒计时，并提示时间到。
思路：使用 setInterval 循环定时器，每隔 1 秒修改页面数字；数字到 0 时清除定时器。

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>倒计时案例</title></head><body><h1>倒计时：<spanid="num">10</span></h1><script>// 获取页面元素varspan=document.getElementById("num");vartime=10;functioncountDown(){time=time-1;span.innerText=time;// 判断倒计时到0if(time<=0){clearInterval(timerId);alert("时间到！");}}// 开启循环定时器vartimerId=setInterval(countDown,1000);</script></body></html>

效果：

案例讲解：

1. 先拿到页面上用来显示数字的 span 元素；
2. 定义初始倒计时时间 time = 10；
3. 单独定义倒计时函数 countDown；
4. 交给循环定时器，每 1 秒执行一次 countDown；
5. 每次执行，时间减 1，把新的数字更新到页面；
6. 当 time 小于等于 0，调用 clearInterval 关闭定时器，同时弹出提示。

7. 小结

1. setTimeout：延时定时器，等待一段时间，执行一次，clearTimeout 取消。
2. setInterval：循环定时器，每隔一段时间重复执行，clearInterval 取消。
3. 定时器第一个参数是函数，可以先单独定义有名函数，再传入；也可以直接写匿名函数。
4. 时间单位是毫秒，1s = 1000ms。
5. 定时器不会阻塞后面代码，属于浏览器安排的异步任务。
6. 定时器 id 是编号，保存 id，才可以取消定时器。
7. 循环定时器一定要记得在合适时机清除，避免一直运行消耗性能。