深入理解 setTimeout 和 setInterval

在 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 <div>定时器示例</div>;
}

应通过 clearInterval 在组件卸载时清理定时器。

4. setImmediate 与 requestAnimationFrame

• setImmediate：仅在 Node.js 环境可用，优先级高于 setTimeout。
• requestAnimationFrame：用于浏览器动画渲染，适用于高性能动画。

六、总结

setTimeout 和 setInterval 是 JavaScript 中处理异步和定时任务的基础工具。理解其执行原理和局限性，能帮助我们更好地应对复杂的时间控制需求，提升应用的稳定性和性能。

在实际开发中，选择合适的方法并结合 Event Loop 机制，能有效避免时间漂移、性能瓶颈和内存泄漏问题。