JS 定时器
学习 setTimeout/setInterval · 难度：入门 · +10XP
JavaScript 定时器全面掌握
JavaScript 提供了两种主要的定时器函数：setTimeout 和 setInterval，它们是 Web API 的一部分，在浏览器和 Node.js 中均可用。
setTimeout 延迟执行
- 在指定毫秒数后执行一次回调函数
- 返回一个定时器 ID，可用于取消
- 实际延迟时间可能受事件循环影响
// 基本用法：延迟 2 秒后执行
setTimeout(() => {
console.log("2秒后执行");
}, 2000);
// 带参数的延迟执行
setTimeout((name, age) => {
console.log(name + "今年" + age + "岁");
}, 3000, "张三", 25);
// 取消延迟执行
const timerId = setTimeout(() => {
console.log("这行不会执行");
}, 5000);
clearTimeout(timerId); // 取消定时器setInterval 周期执行
| 函数 | 执行方式 | 返回 | 取消 |
|---|---|---|---|
setTimeout(cb, ms) | 延迟执行一次 | 定时器 ID | clearTimeout(id) |
setInterval(cb, ms) | 每隔 ms 毫秒重复执行 | 定时器 ID | clearInterval(id) |
requestAnimationFrame(cb) | 下次重绘前执行 | 帧 ID | cancelAnimationFrame(id) |
// setInterval 每秒执行
let count = 0;
const intervalId = setInterval(() => {
count++;
console.log("第 " + count + " 秒");
if (count >= 5) {
clearInterval(intervalId);
console.log("定时器已停止");
}
}, 1000);注意事项与最佳实践
- 定时器不是精确的：JS 单线程，主线程繁忙时回调会被推入任务队列等待
- setInterval 可能重叠：回调执行时间超过间隔可能堆积
- 推荐递归 setTimeout：更安全，避免重叠执行
- 后台标签页降频：隐藏页面的定时器可能降到 1 秒以上
// 倒计时器实现
function countdown(seconds) {
let remaining = seconds;
const timer = setInterval(() => {
if (remaining <= 0) {
clearInterval(timer);
console.log("倒计时结束！");
return;
}
console.log("剩余 " + remaining + " 秒");
remaining--;
}, 1000);
}
countdown(10); // 10秒倒计时