副队长JavaScript教程(62)-BOM之定时器

2026/10/30 18:15:02

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

文章目录

1. 背景
2. 延时定时器 setTimeout
- 2.1 基础语法
- 2.2 取消延时定时器 clearTimeout
3. 循环定时器 setInterval
- 3.1 基础语法
- 3.2 取消循环定时器 clearInterval
4. 两个定时器的对比
5. 入门阶段重要注意点
- 5.1 时间只是**预期时间**，不是绝对精准
- 5.2 定时器里面的函数，不会立刻执行
- 5.3 不要忘记保存定时器 id，否则无法取消
- 5.4 不要随便开启大量循环定时器
6. 实战案例：页面倒计时
7. 小结

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>