javascript定时器如何使用_setTimeout和setInterval有什么区别【教程】

setTimeout只执行一次，适合防抖、按钮禁用等场景；需递归调用才能实现循环；setInterval会持续执行直至手动清除，易因回调耗时导致堆积和内存泄漏；推荐用递归setTimeout替代setInterval以保障节奏稳定和生命周期可控。

setTimeout 只执行一次，别指望它自动循环

你写 setTimeout(fn, 1000)，就是告诉浏览器：“1 秒后调用 fn 一次，之后就没了”。它不会自己续费，也不会管你有没有清掉——它执行完就自动释放资源。

• 适合场景：防抖（用户停输 300ms 后搜）、按钮点击后禁用 1 秒、页面加载完延迟弹窗
• 支持直接传参：setTimeout(console.log, 500, "hello", "world")，比 setTimeout(() => console.log("hello", "world"), 500) 更干净
• 设成 0 不等于“立刻执行”，只是尽快塞进宏任务队列，得等当前同步代码跑完
• 如果想模拟循环，必须手动递归：function tick() { doWork(); setTimeout(tick, 1000); } —— 这才是可控节奏的起点

setInterval 会一直跑，直到你亲手叫停

setInterval(fn, 1000) 的意思是：“从现在起，每 1 秒就尝试调用 fn 一次”，它不看上一次是否结束、有没有报错、甚至页面是否还活着。

• 常见错误现象：倒计时从 “5→4→3” 突然跳成 “5→2→0”，或控制台疯狂打印日志，页面卡顿
• 根本原因：如果 fn 执行耗时 > 1000ms（比如请求慢、渲染重），浏览器会把后续调用“堆进队列”，等前一个结束立刻连发，造成节奏崩坏
• 它不会自动停止，漏掉 clearInterval(id) 就是内存泄漏：回调函数 + 闭包引用的对象全被锁住，组件卸载了还在后台发请求
• 清除必须配对：clearInterval() 只能清 setInterval() 返回的 ID，拿 clearTimeout() 去清会完全无效

为什么推荐用递归 setTimeout 替代 setInterval？

不是为了炫技，而是为了解决真实问题：时间漂移、回调堆积、难以调试。

• 递归 setTimeout 天然保证“上一次执行完，才开始算下一次延时”，节奏稳定，不怕回调变慢
• 错误只影响当次，不会让整个轮询链崩掉；而 setInterval 回调里抛错，定时器照常触发，错误被吞掉，只剩控制台一行警告
• 更易控制生命周期：启动和清除都在同一作用域，React 的 useEffect cleanup 里写 clearTimeout(timerId) 就够了，不用额外存 ref
• 示例：

  let timerId = null;
  function poll() {
    fetch("/api/status").then(r => r.json()).then(data => {
      updateUI(data);
    });
    timerId = setTimeout(poll, 3000); // 成功/失败后都重新计时
  }
  timerId = setTimeout(poll, 3000);

清除定时器时最容易忽略的三个细节

90% 的内存泄漏和重复执行 bug，都出在这几步。

• 清除函数必须和创建函数严格对应：clearTimeout() 清 setTimeout() 的返回值，clearInterval() 清 setInterval() 的返回值，混用=白清
• ID 必须保留引用：在函数外声明变量保存 ID，不能在闭包里重新声明同名变量覆盖旧 ID
• 组件卸载/页面跳转前必须清：React 中 useEffect 的 cleanup 函数、Vue 的 onBeforeUnmount、原生 beforeunload 事件里都要检查并清除

实际项目里，只要涉及轮询、心跳、倒计时这类“重复但要求节奏稳”的逻辑，优先写递归 setTimeout。那个看似省事的 setInterval，往往在压力测试或弱网环境下第一个暴露问题。