在 JavaScript 中，setTimeout 和 setInterval 是处理异步操作的常用方法，分别用于延迟执行代码和定时执行代码。虽然它们使用起来十分简单，但背后的工作原理和实际应用却有许多值得探讨的细节。
一、setTimeout 和 setInterval 基础用法
1. setTimeout 基础用法
setTimeout 用于在指定的时间后执行一个回调函数。
const timerId = setTimeout(() => {
console.log('执行一次');
}, 1000);
// 清除定时器
clearTimeout(timerId);
2. setInterval 基础用法
setInterval 用于每隔指定时间重复执行一个回调函数。
const intervalId = setInterval(() => {
console.log('每隔1秒执行一次');
}, 1000);
// 清除定时器
clearInterval(intervalId);
二、执行机制与 Event Loop
1. 宏任务与微任务
setTimeout 和 setInterval 属于宏任务（macro-task），在 JavaScript 的 Event Loop 中，只有主线程执行栈清空后，才会检查宏任务队列。
执行顺序示例：
console.log('开始');
setTimeout(() => {
console.log('setTimeout 回调');
}, 0);
Promise.resolve().then(() => {
console.log('Promise 回调');
});
console.log('结束');
输出顺序：
开始
结束
Promise 回调
setTimeout 回调
2. 定时器时间不准确性
由于 JavaScript 是单线程语言，如果主线程任务耗时较长，setTimeout 和 setInterval 的执行时间可能会被延迟。
setTimeout(() => {
console.log('延迟执行');
}, 100);
const start = Date.now();
while (Date.now() - start < 200) {}
实际执行时间会远大于 100ms，因为主线程被阻塞了 200ms。
三、setTimeout 和 setInterval 的差异与使用场景
1. 主要差异
特性
setTimeout
setInterval
执行次数
仅执行一次
持续执行直到清除
清除方法
clearTimeout
clearInterval
时间间隔计算方式
任务完成后才开始计时
任务开始时就开始计时
2. 使用场景
setTimeout
延迟执行某些操作（如防抖、异步加载）。
控制任务的节流与执行时间。
setInterval
定时轮询数据更新（如心跳检测、日志记录）。
周期性执行动画或倒计时。
四、setTimeout 模拟 setInterval
如果需要更精确的间隔执行，可以用 setTimeout 递归调用来代替 setInterval。
function myInterval(fn, delay) {
function loop() {
fn();
setTimeout(loop, delay);
}
setTimeout(loop, delay);
}
myInterval(() => {
console.log('模拟 setInterval');
}, 1000);
五、setTimeout 和 setInterval 的最佳实践
1. 避免时间漂移
时间漂移是由于任务执行时间超出设定间隔导致的累积误差，可使用 Date.now() 进行时间校准。
let start = Date.now();
function preciseInterval(fn, interval) {
function loop() {
const now = Date.now();
fn();
const nextTime = interval - (now - start) % interval;
setTimeout(loop, nextTime);
}
loop();
}
preciseInterval(() => {
console.log('更精确的间隔执行');
}, 1000);
2. 清理定时器
在组件卸载或页面切换时，应及时清除定时器，避免内存泄漏。
useEffect(() => {
const id = setInterval(() => {
console.log('定时任务');
}, 1000);
return () => clearInterval(id);
}, []);
3. 性能瓶颈与内存泄漏示例
性能瓶颈示例
如果定时器执行的任务复杂且耗时，会阻塞主线程，影响性能。
setInterval(() => {
for (let i = 0; i < 1e8; i++) {}
console.log('任务完成');
}, 100);
这种情况下，主线程被繁重计算占用，其他任务的执行会被延迟。
内存泄漏示例
在未正确清理定时器的情况下，组件多次挂载和卸载会导致内存占用不断增加。
function App() {
useEffect(() => {
const id = setInterval(() => {
console.log('未清理的定时器');
}, 1000);
}, []);
return
}
应通过 clearInterval 在组件卸载时清理定时器。
4. setImmediate 与 requestAnimationFrame
setImmediate：仅在 Node.js 环境可用，优先级高于 setTimeout。
requestAnimationFrame：用于浏览器动画渲染，适用于高性能动画。
六、总结
setTimeout 和 setInterval 是 JavaScript 中处理异步和定时任务的基础工具。理解其执行原理和局限性，能帮助我们更好地应对复杂的时间控制需求，提升应用的稳定性和性能。
在实际开发中，选择合适的方法并结合 Event Loop 机制，能有效避免时间漂移、性能瓶颈和内存泄漏问题。