setTimeout只执行一次,适用于延迟操作;setInterval重复执行,适合周期任务。两者清除需对应clearTimeout和clearInterval,推荐用setTimeout递归实现精确间隔。

setTimeout 和 setInterval 是 javaScript 中实现延迟或重复执行代码的两个常用定时器方法,它们功能相似但使用场景和行为有本质区别。
1. 执行次数不同
setTimeout 只执行一次指定的函数,在设定的延迟时间后运行。
setInterval 按照设定的时间间隔重复执行函数,直到被手动清除。
例如:
-
setTimeout(() => console.log('只执行一次'), 1000);—— 1秒后输出一次 -
setInterval(() => console.log('每隔1秒执行'), 1000);—— 每隔1秒持续输出
2. 使用场景不同
setTimeout 常用于延迟操作,比如页面跳转、提示信息延时隐藏、防抖处理等。
setInterval 适合周期性任务,如倒计时更新、轮询服务器状态、动画循环等。
注意:如果任务执行时间超过设定间隔,setInterval 仍会继续排队,可能导致多个任务堆积。
3. 清除方式相同但需对应调用
两者都通过返回的 ID 来清除定时器,使用 clearTimeout 和 clearInterval。
必须使用对应的清除方法,否则无法停止:
- 用 setTimeout 返回的 ID 必须用 clearTimeout 清除
- 用 setInterval 返回的 ID 必须用 clearInterval 清除
示例:
const timerId = setTimeout(fn, 1000); clearTimeout(timerId); // 有效 const intervalId = setInterval(fn, 1000); clearInterval(intervalId); // 有效
4. 精确控制建议用 setTimeout 递归
当需要更稳定的间隔执行时,推荐用 setTimeout 嵌套调用代替 setInterval。
因为 setInterval 在执行耗时操作时可能造成间隔不均,而递归 setTimeout 能保证每次执行结束后再等待下一次。
示例:
function repeat() { console.log('执行任务'); setTimeout(repeat, 1000); // 上一次执行完再等1秒 } repeat();
基本上就这些。根据是否需要重复执行来选择方法,注意控制生命周期避免内存泄漏。