setTimeout和setInterval

• 定时器 delay
• 事件循环
• 坑
• 如何解决坑

概念

用来处理异步和定时任务的基础 API

setTimeout(callback,delay,…args)

1. 指定延时 delay/ms
2. 执行一次回调
3. 返回数字 ID,用于关闭定时器

setInterval(callback,delay,…args)

1. 每隔 delay/ms 执行一次
2. 返回数字 ID,用于取消

用途

• 延迟显示元素
• 动画效果
• 周期性数据轮巡
• 构建异步逻辑（基础）

坑

1. 延时不精确
   • delay 指的是将回调函数添加到消息队列中的最小延时时间
   • 常见最小延时限制为 4ms

2. setInterval 任务堆积
   • 回调时间执行时间>delay
   • 新任务已经加入队列
   • 主线程空闲时，任务接连执行导致队列越来越多
   • 解决：改用递归 setTimeout

function diguiTimeout(){
  // 执行语句,200ms
  // ...
  setTimeout(diguiTImeout,100)
}

3. this 指向问题

• 非箭头函数回调，this 默认指向全局对象 window，严格模式下是 undefined，commonJs 环境下是 undefined，无法访问期望的对象属性/方法
• 解决方法：1、箭头函数；2、bind 方法

4. 忘记取消定时器
   • setInterval 不取消一直运行
   • setTimeout 未执行前，应及时取消
   • 避免站用不必要资源

const timer = setTimeout();
const interval = setInterval();
clearTimeout(timer);
clearInterval(interval);

例如，react 中，我们通常会在 useEffect 中的 return 中进行定时器清楚，防止内存泄漏