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);
}

requestAnimationFrame 和setTimeout

requestAnimationFrame顾名思义请求动画帧，用于实现动画效果。是html5提供的用于请求动画的API。以前实现动画效果的方式有html5 canvas、css3 transition animation、js中的定时器
因为 setTimeout 和 setInterval 是异步 api，被放在了延迟队列中，必须要等同步任务执行完，还需要等待微任务完成以后，然后才会去检查这个队列中的任务，执行当前这个回调函数。
这里会存在一个问题，没有办法去精准地把时间定位到，哪怕你写成 16，它也没有办法，让时间精准定位到 16。时间间隔没有办法保证。
setTimeout只是在内存中对图像属性进行改变，这个变化要等下次屏幕刷新时才会被更新到屏幕上。可能会出现丢帧现象。

与 setTimeout 相比，requestAnimationFrame 最大的优势是 由系统来决定回调函数的执行时机。
如果系统绘制率是 60Hz（每秒刷新60次），那么回调函数就每16.7ms 被执行一次，如果绘制频率是75Hz，那么这个间隔时间就变成了 1000/75=13.3ms，也就是说它的时间间隔，是跟着系统的绘制频率走。（cpu节能（setTimeout在页面被最小化时依然在后台执行）；节流）