js定时器setTimeout与setInterval区别

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。

稿定AI社区

在线AI创意灵感社区

60

查看详情

必须使用对应的清除方法，否则无法停止：

• 用 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();

基本上就这些。根据是否需要重复执行来选择方法，注意控制生命周期避免内存泄漏。

以上就是js定时器setTimeout与setInterval区别的详细内容，更多请关注php中文网其它相关文章！