requestAnimationFrame 实现1s

7次阅读

共计 619 个字符,预计需要花费 2 分钟才能阅读完成。

概述

通过 requestAnimationFrame 实现 对特定时间的控制,探其使用方式
不适用 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)
})

正文完
 0