js手写题——setTimeout和setInterval

setTimeout是如何实现的

对于需要延迟执行的任务，如定时器任务，在 Chrome 中除了正常使用的消息队列之外，还有另外一个消息队列，这个队列中维护了需要延迟执行的任务列表，叫延迟队列。处理完消息队列中的一个任务之后，就开始执行 ProcessDelayTask 函数。ProcessDelayTask 函数会根据发起时间和延迟时间计算出到期的任务，然后依次执行这些到期的任务。等到期的任务执行完成之后，再继续下一个循环过程。 使用setTimeout的注意事项： 1,如果当前任务执行时间过久，会影响定时器任务的执行

function bar() {
          
   
    console.log(bar)
}
function foo() {
          
   
    setTimeout(bar, 0);
    for (let i = 0; i < 5000; i++) {
          
   
        let i = 5+8+8+8
        console.log(i)
    }
}
foo()

2，如果 setTimeout 存在嵌套调用，那么系统会设置最短时间间隔为 4 毫秒 3，未激活的页面，setTimeout 执行最小间隔是 1000 毫秒 4，延时执行时间有最大值 5，在对象方法中的延时器this指向全局对象window，严格模式下指向undefined

用setTimeout模拟setInterval

setTimeOut和setInterVal中时间参数并不是到点就立即执行，而是到点将其回调事件加入事件队列中。按照队列先进先出的性质，该回调事件到点之后是否能执行取决于是否属于队列首位，如果前头还有其他事件在等待，则不能按点执行。这并是导致事件等待执行时间出现误差的原因。 定时器对队列的工作方式是，当特定时间过去后将代码插入队列。注意，给队列添加代码并不意味着对它立刻执行，而只能表示它会尽快执行。设定一个 150ms 后执行的定时器不代表到了 150ms 代码就立刻执行，它表示代码会在 150ms 后被加入到队列中。如果在这个时间点上，队列中没有其他东西，那么这段代码就会被执行。 为什么要用setTimeout实现setInterval: setInterval 有两个缺点： ● 使用 setInterval 时，某些间隔会被跳过； ● 可能多个定时器会连续执行； 产生这些缺点的原因是：每个 setTimeout 产生的任务会直接 push 到任务队列中；而 setInterval 在每次把任务 push 到任务队列前，都要进行一下判断(看上次的任务是否仍在队列中，如果有则不添加，如果上一次的任务执行时间过长，导致下一次任务进来的时候上一次任务还在队列里面，那么下一次任务的push将会被跳过。而且如果一次执行的任务过长也会导致两个任务连续执行的情况。 所以我们可以用setTimeout代替setInterval来解决上述的问题。

function mySetInterval(fn, wait) {
          
   
    let timer = null
    function interval() {
          
   
        timer = setTimeout(() => {
          
   
            fn()
            interval()
        }, wait);
    }
    interval()
    return {
          
   
        cancel() {
          
   
            clearTimeout(timer)
        }
    }
}

用setInterval实现setTimeout

function mySetTimeout(fn, wait) {
          
   
    const timer = setInterval(() => {
          
   
        fn()
        clearInterval(timer)
    }, wait);
}