使用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);
    };
};
上一篇下一篇

猜你喜欢

热点阅读