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图片边框border-image的用法
Jun 30 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
$.format,jquery.format 使用说明
2011/07/13 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
vue源码入口文件分析(推荐)
2018/01/30 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
Python数据集切分实例
2018/12/08 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
优秀经理事迹材料
2014/02/01 职场文书
感恩的演讲稿
2014/05/06 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
2014年班组工作总结
2014/11/20 职场文书
领导工作表现评语
2015/01/04 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers