使用requestAnimationFrame实现setTime
2021-10-07 本文已影响0人
心大的少年
注意:若你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用
window.requestAnimationFrame()
requestAnimationFrame函数需要传递一个函数作为参数,会返回一个id作为唯一标识,并且
该回调函数会被传入
DOMHighResTimeStamp
参数,该参数与performance.now()
的返回值相同,它表示requestAnimationFrame()
开始去执行回调函数的时刻
所以我们做的事情就很简单了,只需要在时间没到达指定的时间的时候重复调用此函数,想要清除的话只需要使用window.cancelAnimationFrame()
把得到的id传递进去即可
const timeout = (fn: () => void, delay: number): () => void => {
let timer: number;
const stime = +new Date();
const loop = () => {
const etime = +new Date();
if (stime + delay <= etime) {
fn();
return;
}
timer = requestAnimationFrame(loop);
};
timer = requestAnimationFrame(loop);
return () => {
console.log('触发了取消');
cancelAnimationFrame(timer);
};
};