当前位置: 首页 > Web前端 > HTML

requestAnimationFrame的实现1s

时间:2023-04-02 12:29:26 HTML

概述通过requestAnimationFrame实现对特定时间的控制,探究其使用方法不适合setTimeout或setInterval的原因。它们性能差,受硬件影响大,时序不准确。源码实现函数times(cb=()=>{},timeStamp){letprev=Date.now();const原点=上一个;让当前=0;lettimer=requestAnimationFrame(function(){cur=Date.now();if(cur-prev>timeStamp){cb(prev,cur,origin);//prev:previous,cur:current,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)=>{constdiff=Math.floor((cur-origin)/1000);console.log('1s后我执行成功',1000)})