requestAnimationFrame 实现1s

共计 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)
})