setTimeout模拟setInterval

setInterval的问题

  首先明确,无论setTimeout还是setInterval,都是在指定时间,将回调函数推入任务队列,无法保证回调函数的实际执行时间。
  两者不同在于,setTimeout直接将回调函数推入任务队列,setInterval在推入前,需要检查任务队列中是否存在相同的回调函数(即未执行),若有则忽略本次推入。
setTimeout模拟setInterval_第1张图片

  上图中,setInterval设置200ms推入一次回调函数,但由于回调函数执行耗时较长,605ms时发现405ms推入的回调函数仍未执行,因此跳过本次推入。
  setInterval的问题在于,回调函数实际执行的间隔,可能小于设置的参数值,甚至参数值被忽略而连续执行。

setTimeout模拟setInterval

const mySetInterval = (callback, interval) => {
  const rec = () => {
    setTimeout(() => {
      callback() // 执行callback
      rec() // 递归调用
    }, interval)
  }
  rec()
}

你可能感兴趣的:(前端)