网站
引入
页面中经常需要延迟执行某个操作，或者每隔一段时间重复执行某个操作。比如倒计时、轮播图自动切换、定时刷新数据等场景，这些都需要用到定时器。
JS 提供了 setTimeout() 和 setInterval() 两个定时器函数，用来控制代码的执行时机。
定义
定义
定时器是用来在指定时间后执行代码，或者每隔一段时间重复执行代码的方法。
setTimeout()：延迟一段时间后执行一次setInterval()：每隔一段时间重复执行
语法
setTimeout()
setTimeout(function () {
console.log("3 秒后执行");
}, 3000);- 第一个参数是回调函数，表示要执行的代码
- 第二个参数是延迟时间，单位是毫秒（1 秒 = 1000 毫秒）
- 返回值是定时器的 ID，可以用来取消定时器
setInterval()
setInterval(function () {
console.log("每隔 2 秒执行一次");
}, 2000);- 第一个参数是回调函数
- 第二个参数是间隔时间，单位是毫秒
- 返回值是定时器的 ID
清除定时器
const timerId = setTimeout(function () {
console.log("这段代码不会执行");
}, 3000);
clearTimeout(timerId);const timerId = setInterval(function () {
console.log("重复执行");
}, 1000);
clearInterval(timerId);clearTimeout()用于清除setTimeout()创建的定时器clearInterval()用于清除setInterval()创建的定时器
例子
示例 1：延迟显示提示信息
<button id="btn">点击</button>
<p id="message"></p>const btn = document.querySelector("#btn");
const message = document.querySelector("#message");
btn.addEventListener("click", function () {
message.textContent = "正在处理...";
setTimeout(function () {
message.textContent = "处理完成";
}, 2000);
});点击按钮后，立刻显示”正在处理…”，2 秒后显示”处理完成”。
示例 2：倒计时
<p id="countdown">5</p>const countdown = document.querySelector("#countdown");
let count = 5;
const timerId = setInterval(function () {
count = count - 1;
countdown.textContent = count;
if (count === 0) {
clearInterval(timerId);
countdown.textContent = "时间到";
}
}, 1000);从 5 开始倒数，每秒减 1，倒数到 0 时停止定时器并显示”时间到”。
示例 3：自动轮播
<div id="banner">图片 1</div>const banner = document.querySelector("#banner");
let index = 1;
setInterval(function () {
index = index + 1;
if (index > 3) {
index = 1;
}
banner.textContent = "图片 " + index;
}, 2000);每隔 2 秒切换一次图片，循环显示图片 1、2、3。
示例 4：防止重复点击
<button id="submit">提交</button>const submit = document.querySelector("#submit");
let isDisabled = false;
submit.addEventListener("click", function () {
if (isDisabled) {
return;
}
console.log("提交成功");
isDisabled = true;
submit.textContent = "已提交";
setTimeout(function () {
isDisabled = false;
submit.textContent = "提交";
}, 3000);
});点击按钮后，3 秒内不能再次点击，3 秒后恢复可点击状态。
特点
- 延迟时间单位是毫秒，
1000表示 1 秒 setTimeout()只执行一次，setInterval()会持续执行- 定时器不会阻塞后续代码的执行，代码会继续往下运行
- 延迟时间不是绝对精确的，可能会有几毫秒的误差
- 如果不需要定时器了，要用
clearTimeout()或clearInterval()清除，避免浪费资源 setInterval()如果回调函数执行时间过长，可能会导致下一次执行被延迟或跳过- 定时器的回调函数中的
this通常指向window，如果需要绑定特定对象，可以使用箭头函数或bind()
常见写法
| 写法 | 作用 |
|---|---|
setTimeout(fn, 1000) | 1 秒后执行一次 |
setInterval(fn, 2000) | 每隔 2 秒执行一次 |
clearTimeout(timerId) | 清除 setTimeout() 定时器 |
clearInterval(timerId) | 清除 setInterval() 定时器 |
setTimeout(fn, 0) | 尽快执行，但会等当前代码执行完 |
注意事项
- 页面关闭或跳转时，定时器会自动清除
- 如果在定时器回调函数中修改页面内容，要确保元素已经存在
setInterval()容易造成定时器堆积，如果任务耗时较长，建议用setTimeout()递归调用- 定时器 ID 是一个数字，用来标识不同的定时器
- 延迟时间为
0不代表立刻执行，而是等当前代码执行完后尽快执行
用 setTimeout() 模拟 setInterval()
function repeat() {
console.log("执行任务");
setTimeout(repeat, 1000);
}
repeat();这种写法可以避免 setInterval() 可能出现的任务堆积问题，因为每次执行完才会设置下一次定时器。
理解
可以把 setTimeout() 理解为”定个闹钟，时间到了提醒一次”。
可以把 setInterval() 理解为”定个闹钟，每隔一段时间就提醒一次”。
定时器不是让代码停下来等，而是告诉浏览器”到时间了你帮我执行这段代码”，JS 代码会继续往下运行。
使用定时器时要记得清除，特别是 setInterval()，否则会一直执行下去，浪费资源。
引出
理解了定时器后，可以结合 JS 事件 和 JS DOM API 实现更丰富的交互效果。
如果需要处理更复杂的异步任务，可以学习 JS Promise 和 JS async await。