setTimeout、setInterval、requestAnimationFrame

在异步编程中当然少不了定时器了，常见的定时器函数有setTimeout、setInterval、requestAnimationFrame。

• setTimeout

刚开始用setTimeout时，通过会认为设置延时多久，就应该是多久后执行。其实这个观点是错误的，因为JS是单线程执行的，如果前面的代码影响了性能，就会导致setTimeout不会按期执行。这就要求我们不断去修正，使定时器相对准确。

let period = 60 * 1000 * 60 * 2;
let startTime = new Date().getTime();
let count = 0;
let end = new Date().getTime() + period;
let interval = 1000;
let currentInterval = interval;

function loop() {
    count++;
    // 代码执行所消耗的时间
    let offset = new Date().getTime() - (startTime + count * interval)
    let diff = end - new Date().getTime()
    let h = Math.floor(diff / (60 * 1000 * 60))
    let hdiff = diff % (60 * 1000 * 60)
    let m = Math.floor(hdiff / (60 * 1000))
    let mdiff = hdiff % (60 * 1000)
    let s = mdiff / 1000
    let sCeil = Math.ceil(s)
    let sFloor = Math.floor(s)
    //得到下一次循环所消耗的时间
    currentInterval = interval - offset;
    console.log(`时：${h},分：${m},秒：${s},代码执行用时${offset}ms,下次循环间隔${currentInterval}`)
    setTimeout(loop, currentInterval)
}
setTimeout(loop, currentInterval)

• setInterval

通常来说不建议使用setInterval。第一，它和setTimeout一样，不能保证在预期的时间执行任务；第二，它存在执行累积的问题。如果定时器执行过程中出现了耗时操作，多个回调函数会在耗时操作结束后同时执行，从而带来性能上的问题。

如果有循环定时器的请求，完全可以通过requestAnimationFrame来实现。

function setInterval(callback, interval) {
    let timer;
    const now = Date.now;
    let startTime = now();
    let endTime = startTime;
    const loop = () => {
        timer = window.requestAnimationFrame(loop)
        endTime = now()
        if (endTime - startTime >= interval) {
            startTime = endTime = now()
            callback(timer)
        }
    }
    timer = window.requestAnimationFrame(loop)
    return timer
}

let a = 0
setInterval(timer => {
    console.log('1', 1)
    a++
    if (a === 3) {
        cancelAnimationFrame(timer)
    }
}, 1000)

• requestAnimationFrame

计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面，循环间隔必须足够短，这样才能让不同的动画效果显得平滑流畅；另一方面，循环间隔还要足够长，这样才能确保浏览器有能力渲染产生的变化

大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms

而setTimeout和setInterval的问题是，它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行

requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果

requestAnimationFrame自带函数节流功能，基本可以保证在16.6毫秒内只执行一次（不掉帧的情况下），并且该函数的延时效果是精确的，没有其他定时器时间不准的问题，同样可以通过该函数实现setTime。

• 总结

1. requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率

2. 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量

3. requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。