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 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
详解基于canvas的视频遮罩插件
Jan 04 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 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
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
PHP时间类完整代码实例
2021/02/26 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Django继承自带user表并重写的例子
2019/11/18 Python
python将数据插入数据库的代码分享
2020/08/16 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
《守株待兔》教学反思
2014/03/01 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
运动会广播稿20字
2015/08/19 职场文书