JS中的定时器requestAnimationFrame 、setTimeout 和setInterval

小白啥时候能进阶成功

已于 2022-10-22 15:00:37 修改

阅读量3.9k

点赞数 1

分类专栏： JS 文章标签： javascript 动画 css3

于 2020-04-13 15:08:13 首次发布

本文链接：https://blog.csdn.net/qq_34754747/article/details/105488870

版权

1. requestAnimationFrame定时循环接口

1.1 requestAnimationFrame (rAF)

通知浏览器某个JS代码段在执行动画
浏览器会在每帧即将绘制之前，将这段代码先执行。

requestAnimationFrame和屏幕刷新是同步的，也就是说屏幕每刷新一次，requestAnimationFrame就触发一次。不同显示器的刷新率不同

那么如果要实现一个15Hz刷新率的动画呢?


var fps = 15
var fpsInterval = 1000 / fps
var last = new Date().getTime() //上次执行的时刻
 
function animate() {
 
    requestAnimationFrame(animate);
    // 执行时的时间
    var now = new Date().getTime()
    var elapsed = now - last;
    // 经过了足够的时间
    if (elapsed > fpsInterval) {
        last = now - (elapsed % fpsInterval); //校正当前时间
        
        // 循环的代码
        // drawSomething()
    }
}

即在每次执行代码时，检查与上帧的时间差，如果大于指定的间隔，进行绘制，将更新上帧的时间。

以想要15Hz刷新率为例，即想要每40ms更新一次。而rAF的执行频率是17ms（假设屏幕刷新频率是60HZ，则17ms刷新一次）一次。那么实际的过程是这样的。

从0ms开始经过了17ms , 检查发现不到40ms,