美文网首页
使用requestAnimationFrame实现setTime

使用requestAnimationFrame实现setTime

作者: 心大的少年 | 来源:发表于2021-10-07 16:49 被阅读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);
        };
    };
    

    相关文章

      网友评论

          本文标题:使用requestAnimationFrame实现setTime

          本文链接:https://www.haomeiwen.com/subject/bhmxoltx.html