requestAnimationFrame 实现1s

2024年1月12日 178次阅读 来源: 心语花束

概述

  1. 通过 requestAnimationFrame 实现 对特定时间的控制，探其使用方式
  2. 不适用 setTimeout 或 setInterval 的原因，他们实现性能差，受硬件影响大，计时不准确。

源码实现

function times( cb=()=>{}, timeStamp ){
    let prev = Date.now();
    const origin = prev;
    let cur = 0;
    let timer = requestAnimationFrame(function(){
        cur = Date.now();
        if( cur - prev > timeStamp ){
            cb( prev, cur, origin ); // prev: 前一个, cur: 当前, origin: 起始时间,  
            prev = cur;
        }
        timer && cancelAnimationFrame( timer );
        timer = requestAnimationFrame( arguments.callee );
    });
}

参数解释

1. cb 回调函数， 执行特定时间后的回调
   回调函数默认带回 prev, cur, origin 三个参数：
       prev：函数执行上一次时刻记录。 
       cur：当前时刻记录。
       origin： 函数初次调用时的时刻。
2. timeStamp 时间， 单位是 ms

调用方式

times((prev, cur, origin )=>{
    const diff = Math.floor( (cur - origin) / 1000 );
    console.log('1s 后我被成功执行了', 1000 )
})
    原文作者：心语花束
    原文地址: https://segmentfault.com/a/1190000018526980
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞