JS中的setTimeout和setInterval有什么区别？

setTimeout用于一次性延时操作，setInterval用于周期性重复执行，二者在执行次数、定时精度及使用场景上存在显著差异。具体区别如下：

1. 执行次数

setTimeout：仅执行一次任务，在指定延迟时间后触发回调函数。setTimeout(() => { alert('3秒后弹出提示');}, 3000);
setInterval：每隔指定时间重复执行任务，需手动清除（如clearInterval）才会停止。const timer = setInterval(() => { console.log(new Date().toLocaleTimeString()); // 每秒更新时间}, 1000);// 需手动调用 clearInterval(timer) 停止

2. 定时精度与异步特性

非精确性：JavaScript是单线程语言，定时器回调需等待当前执行栈清空后才会执行。即使设置0ms延迟，setTimeout(fn, 0)也不会立即执行。console.log('Start');setTimeout(() => console.log('Timeout'), 0);for (let i = 0; i < 1e9; i++) {} // 模拟耗时操作console.log('End'); // 输出顺序：Start → End → Timeout
主线程阻塞影响：若主线程繁忙（如执行复杂计算），定时器会被推迟，无论setTimeout还是setInterval均受此影响。

3. 使用建议与注意事项

推荐场景：
setTimeout：延迟执行、防抖（debounce）、递归调用替代循环。// 防抖示例：输入停止后1秒执行搜索let debounceTimer;input.addEventListener('input', () => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => search(), 1000);});
setInterval：轮询数据、动画帧控制、倒计时等周期性任务。// 倒计时示例let count = 10;const countdown = setInterval(() => { console.log(count--); if (count < 0) clearInterval(countdown);}, 1000);
注意事项：
避免高精度任务：如音视频同步，定时器误差可能导致同步失败。
防止内存泄漏：嵌套定时器或未清除的定时器可能引发逻辑混乱或内存占用。// 错误示例：未清除的定时器导致内存泄漏setInterval(() => {}, 1000); // 页面卸载后仍继续执行
组件卸载时清除：在React/Vue等框架中，需在组件卸载时清除定时器。// React useEffect 示例useEffect(() => { const timer = setInterval(() => {}, 1000); return () => clearInterval(timer); // 组件卸载时清除}, []);

总结

理解二者差异有助于编写更稳定、可控的异步逻辑，避免因误用导致的性能问题或逻辑错误。

热门标签