手写一个setInterval

模拟setInterval的技巧

最新推荐文章于 2025-01-10 11:13:19 发布

原创最新推荐文章于 2025-01-10 11:13:19 发布 · 552 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文探讨了setInterval定时器在JavaScript中的工作原理及其潜在问题。由于执行栈的限制，实际执行间隔可能与预期不符。文章提供了一种使用setTimeout递归调用来模拟setInterval的方法，以确保更精确的定时任务执行。

setInterval定时器的一些问题

// setInterval的所用是每隔一段指定的时间执行一个函数，但是这个执行不是真的到了时间立即执行，
// 它真正的作用是每隔一段时间将事件加入事件队列中去，只有当前的执行栈为空的时候，才能去从事件
// 队列中取出事件执行。所以可能会出现这样的问题，就是当前执行栈执行的时间很长导致事件队列里面
// 累积多个定时器加入的事件，当执行栈结束的时候，这些事件会依次执行，因此就不能做到每隔一段时间
// 执行的效果了
// 针对setInterval的这个缺点，我们可以使用setTimeout递归调用来模拟 setInterval,这样我们确保了只有一个事件
// 结束了，我们才会触发下一个定时器事件，这样解决了 setInterval 的问题


// 模拟setInterval
    function mySetInterval(fn, delay, ...args) {
      const timer = { flag: true }
      function interval() {
        if (timer.flag) {
          fn(...args)
          setTimeout(() => {
            interval()
          }, delay)
        }
      }
      setTimeout(() => {
        interval()
      }, delay)
      return timer
    }