requestAnimationFrame 实现1s

Karrdy 发布于2019-08-23 15:56 / 1390人阅读

摘要：概述通过实现对特定时间的控制，探其使用方式不适用或的原因，他们实现性能差，受硬件影响大，计时不准确。时间，单位是调用方式后我被成功执行了

概述

通过 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 )
})

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102568.html

requestAnimationFrame 实现1s

摘要：概述通过实现对特定时间的控制，探其使用方式不适用或的原因，他们实现性能差，受硬件影响大，计时不准确。时间，单位是调用方式后我被成功执行了概述通过 requestAnimationFrame 实现对特定时间的控制，探其使用方式不适用 setTimeout 或 setInterval 的原因，他们实现性能差，受硬件影响大，计时不准确。源码实现 function times( ...

NoraXie 2019-08-02 16:08 评论0 收藏0
requestAnimationFrame 实现1s

摘要：概述通过实现对特定时间的控制，探其使用方式不适用或的原因，他们实现性能差，受硬件影响大，计时不准确。时间，单位是调用方式后我被成功执行了概述通过 requestAnimationFrame 实现对特定时间的控制，探其使用方式不适用 setTimeout 或 setInterval 的原因，他们实现性能差，受硬件影响大，计时不准确。源码实现 function times( ...

Jrain 2019-08-26 13:38 评论0 收藏0
requestAnimationFrame 实现1s

摘要：概述通过实现对特定时间的控制，探其使用方式不适用或的原因，他们实现性能差，受硬件影响大，计时不准确。时间，单位是调用方式后我被成功执行了概述通过 requestAnimationFrame 实现对特定时间的控制，探其使用方式不适用 setTimeout 或 setInterval 的原因，他们实现性能差，受硬件影响大，计时不准确。源码实现 function times( ...

e10101 2019-08-02 14:32 评论0 收藏0
演示当定时器在页面最小化时无法执行

　　我们讲述的是关于 ahooks 源码系列文章的第七篇，总结主要讲述下面几点：　　巩固 React hooks 的理解。　　学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。　　培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。　　注：本系列对 ahooks 的源码解析是基于v3.3.13。自己 folk 了一份源码，主要是对源码做了一些解读，可见详情。　　...

3403771864 2022-10-23 13:12 评论0 收藏0
【前端优化】动画几种实现方式总结和性能分析

摘要：备注没整理格式，抱歉动画实现的几种方式性能排序实现方式自身调用调用的定时器值推荐最小使用的原因即每秒帧为什么倒计时动画一定要用而避免使用两者区别及引发的线程讨论线程讨论为什么单线程是的一大特性。备注：没整理格式，抱歉动画实现的几种方式：性能排序js < requestAnimationFrame 3->4->2. 那么在来看你这段代码。 var t = true; window...

IamDLY 2019-08-23 15:35 评论0 收藏0