关于setinterval和requestAnimationFrame

关于setinterval计时不准确，该如何解决

由于Javascript是单线程的，所以定时器的实现是在当前执行栈中任务完成后在执行队列里的定时器回调的，
假如主线程中任务执行时间大于定时器设置的延迟时间，那么定时器就不是那么可靠了，如下代码：

​
let startTime= new Date().getTime()//getTime转化成毫秒数
    setTimeout(()=>{
        let endTime=new Date().getTime();
        console.log(endTime-startTime);//检测时间是否超过50ms，最终打印远远大于50
    },50)
    for (let i=0;i<2000;i++){
            console.log(1)
    }

​

    可以看到，设置了50ms后执行，实际延迟时间远远大于这个数值，这就会导致动画效果并不会达到想要的结果。
动画是浏览器按照一定的频率一帧一帧的绘制出来，而CSS实现的动画优势就是浏览器知道动画的开始及每一帧的循环间隔，
能够在恰当的时间刷新UI，给用户一种流畅的体验；对于setInterval或setTimeout实现的JS动画就不靠谱了，因为浏览
器根本无法保证每一帧渲染的时间间隔,一般情况下，美妙平均刷新次数能够达到60帧，用户能够感知到流畅，即每通过1000/60
毫秒渲染新一帧即可，从上面可以看到这是无法保证的。

所以，使用requestAnimationFrame 来解决，它是根据浏览器的刷新频率（每秒60帧）来进行绘制的，
requestAnimationFrame接收一个动画执行函数作为参数，在即将开始浏览器重绘的时候，会调用这个函数，
它的功效只是一次性的，因为这个函数的作用是仅执行一帧动画的渲染，所以如果想达到动画效果，必须连续
不断地调用requestAnimationFrame，这和setTimeout的效果是一样的。

requestAnimationFrame会返回一个资源标识符，可以把它作为参数传入cancleAnimationFrame函数来取消requestAnimationFrame的回调。

特点：

1.requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
2.在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
3.requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销