h5计时器（requestAnimationFrame）

今天药忘吃喽~ 2022-01-26 01:31 451阅读 0赞

> 上次写节拍器的时候用到了h5计时器，但只是简单的记录了一点，今天特在此总结一下。

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script>
        /*没有时间设置  电脑的帧率  刷新  1000/60  16.6667ms*/
        /*(function loop(){
            console.log(1);
            window.requestAnimationFrame(loop);
        })();*/
        /*兼容性写法*/
        window.requestAnimate=(function (){
            return window.requestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            function (callback){
                                setTimeout(callback,1000/60);
                            }
        })();
        var count=0;
        (function loop(){
            window.requestAnimate(loop);
            count++;
            if(count>=20)
            {
                count=0;
                console.log(1);
            }
    //关闭
    window.cancelAnimationFrame(loop)
    
        })();
    </script>
    </body>
    </html>

这个计时器的优点很多，简单来说就是bug少，资源占用少所以性能也好。相对于之前的js计时器，它的性能是巨大的。

发表评论取消回复

表情：

评论列表（有 0 条评论，451人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5优化Web动画——requestAnimationFrame

页面中实现动画，我们有很多选择可以使用CSS3的transition CSS3中的animation配合keyframes规则 SVG中也可以使用SMIL-...

叁歲伎倆/ 2024年04月18日 10:11/ 0 赞/ 87 阅读

相关 h5页面计时器

h5页面计时器效果代码效果 ![在这里插入图片描述][70] 代码 <script> function countT

小鱼儿/ 2023年10月18日 09:22/ 0 赞/ 76 阅读

相关 window.requestAnimationFrame

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函

向右看齐/ 2023年01月18日 04:14/ 0 赞/ 160 阅读

相关浅析 requestAnimationFrame

相信现在绝大多数人在 JavaScript 中绘制动画已经在使用 requestAnimationFrame 了，关于 requestAnimationFrame 的种种就不多

素颜马尾好姑娘i/ 2022年06月10日 07:44/ 0 赞/ 285 阅读

相关 requestAnimationFrame

requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。设置这个API的目的是为了让各种网页

朱雀/ 2022年06月01日 03:10/ 0 赞/ 178 阅读

相关 requestAnimationFrame

requestAnimationFrame > requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是

﹏ヽ暗。殇╰゛Y/ 2022年05月28日 07:15/ 0 赞/ 225 阅读

相关 window.requestAnimationFrame

HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition

痛定思痛。/ 2022年05月13日 11:12/ 0 赞/ 166 阅读

相关 window.requestAnimationFrame

`window.requestAnimationFrame()`方法跟`setTimeout`类似，都是推迟某个函数的执行。不同之处在于，`setTimeout`必须指定推迟的

布满荆棘的人生/ 2022年03月09日 06:12/ 0 赞/ 229 阅读

相关 h5计时器（requestAnimationFrame）

> 上次写节拍器的时候用到了h5计时器，但只是简单的记录了一点，今天特在此总结一下。 <!DOCTYPE html> <html> <head lan

今天药忘吃喽~/ 2022年01月26日 01:31/ 0 赞/ 452 阅读

相关有关requestAnimationFrame

是什么我们先来看一下JS的Event Loop都干了些什么： EventLoop执行过程：执行同步代码执行当前队列尾部所有微任务必要的话渲染UI（浏览器是60h...

小灰灰/ 2021年04月22日 14:56/ 0 赞/ 491 阅读