html5新增的定时器requestAnimationFrame实现进度条功能


Posted in HTML / CSS onDecember 13, 2018

在requestAnimationFrame出现之前,我们一般都用setTimeout和setInterval,那么html5为什么新增一个requestAnimationFrame,他的出现是为了解决什么问题?

优势与特点:

1)requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率

2)在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存使用量

3)requestAnimationFrame是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销

一句话就是:这玩意性能高,不会卡屏,根据不同的浏览器自动调整帧率。如果看不懂或者不理解,也没有什么关系,这玩意跟浏览器渲染原理有关。我们先学会使用它!

如何使用requestAnimationFrame?

使用方式跟定时器setTimeout差不多,不同之处在于,他不需要设置时间间隔参数

var timer = requestAnimationFrame( function(){
            console.log( '定时器代码' );
        } );

参数是一个回调函数,返回值是一个整数,用来表示定时器的编号.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var aInput = document.querySelectorAll( "input" ),
                timer = null;
            aInput[0].onclick = function(){
                timer = requestAnimationFrame( function say(){
                    console.log( 1 );
                    timer = requestAnimationFrame( say );
                } );
            };
            aInput[1].onclick = function(){
                cancelAnimationFrame( timer );
            }
        }
    </script>
</head>
<body>
    <input type="button" value="开启">
    <input type="button" value="关闭">
</body>
</html>

cancelAnimationFrame用来关闭定时器

这个方法需要处理兼容:

 简单的兼容:

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

如果浏览器都不认识AnimationFrame,就用setTimeout兼容.

运用3种不同的定时器(setTimeout, setInterval, requestAnimationFrame)实现一个进度条的加载

一、setInterval方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:0px;
            height:40px;
            border-radius:20px;
            background:#09f;
            text-align:center;
            font:bold 30px/40px '微软雅黑';
            color:white;
        }
    </style>
    <script>
        window.onload = function(){
            var oBtn = document.querySelector( "input" ),
                oBox = document.querySelector( "div" ),
                timer = null, curWidth = 0,
                getStyle = function( obj, name, value ){
                    if( obj.currentStyle ) {
                        return obj.currentStyle[name];
                    }else {
                        return getComputedStyle( obj, false )[name];
                    }
                };
            oBtn.onclick = function(){
                clearInterval( timer );
                oBox.style.width = '0';
                timer = setInterval( function(){
                    curWidth = parseInt( getStyle( oBox, 'width' ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + 'px';
                        oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%';
                    }else {
                        clearInterval( timer );
                    }
                }, 1000 / 60 );
            }
        }
    </script>
</head>
<body>
    <div>0%</div>
    <p><input type="button" value="ready!Go"></p>
</body>
</html>

html5新增的定时器requestAnimationFrame实现进度条功能

二、setTimeout方式

<script>
        window.onload = function(){
            var oBtn = document.querySelector( "input" ),
                oBox = document.querySelector( "div" ),
                timer = null, curWidth = 0,
                getStyle = function( obj, name, value ){
                    if( obj.currentStyle ) {
                        return obj.currentStyle[name];
                    }else {
                        return getComputedStyle( obj, false )[name];
                    }
                };
            oBtn.onclick = function(){
                clearTimeout( timer );
                oBox.style.width = '0';
                timer = setTimeout( function go(){
                    curWidth = parseInt( getStyle( oBox, 'width' ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + 'px';
                        oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%';
                        timer = setTimeout( go, 1000 / 60 );
                    }else {
                        clearInterval( timer );
                    }
                }, 1000 / 60 );
            }
        }
    </script>

    三、requestAnimationFrame方式   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:0px;
            height:40px;
            border-radius:20px;
            background:#09f;
            text-align:center;
            font:bold 30px/40px '微软雅黑';
            color:white;
        }
    </style>
    <script>
        window.onload = function(){
            var oBtn = document.querySelector( "input" ),
                oBox = document.querySelector( "div" ),
                timer = null, curWidth = 0,
                getStyle = function( obj, name, value ){
                    if( obj.currentStyle ) {
                        return obj.currentStyle[name];
                    }else {
                        return getComputedStyle( obj, false )[name];
                    }
                };
            oBtn.onclick = function(){
                cancelAnimationFrame( timer );
                oBox.style.width = '0';
                timer = requestAnimationFrame( function go(){
                    curWidth = parseInt( getStyle( oBox, 'width' ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + 'px';
                        oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%';
                        timer = requestAnimationFrame( go );
                    }else {
                        cancelAnimationFrame( timer );
                    }
                } );
            }
        }
    </script>
</head>
<body>
    <div>0%</div>
    <p><input type="button" value="ready!Go"></p>
</body>
</html>

 

HTML / CSS 相关文章推荐
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 #HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 #HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 #HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 #HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 #HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 #HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 #HTML / CSS
You might like
phpBB BBcode处理的漏洞
2006/10/09 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
php自动加载机制的深入分析
2013/06/08 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python写的一个简单DNS服务器实例
2014/06/04 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Mac安装python3的方法步骤
2019/08/09 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
应届护士推荐信
2013/11/16 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
自动一体化专业求职信
2014/03/15 职场文书
授权委托书样本
2014/04/03 职场文书
村抢险救灾方案
2014/05/09 职场文书
员工工作能力评语
2014/12/31 职场文书
2015年路政工作总结
2015/05/22 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
社区服务理念口号
2015/12/25 职场文书
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫
Nginx 匹配方式
2022/05/15 Servers