脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bom 定时器 requestanimationframe

BOM系列第二篇之定时器requestAnimationFrame

 更新时间：2016年08月17日 10:22:40   作者：小火柴的蓝色理想  
这篇文章主要介绍了BOM系列第二篇之定时器requestAnimationFrame 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

引入

　　计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面，循环间隔必须足够短，这样才能让不同的动画效果显得平滑流畅；另一方面，循环间隔还要足够长，这样才能确保浏览器有能力渲染产生的变化

　　大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环间隔是lOOOms/60，约等于16.6ms

　　而setTimeout和setInterval的问题是，它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行

　　requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果

特点

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

　　【2】在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量

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

使用

　　requestAnimationFrame的用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行

requestID = requestAnimationFrame(callback); 
//控制台输出1和0
var timer = requestAnimationFrame(function(){
console.log(0);
}); 
console.log(timer);//1 
　　cancelAnimationFrame方法用于取消定时器
//控制台什么都不输出
var timer = requestAnimationFrame(function(){
console.log(0);
}); 
cancelAnimationFrame(timer);

　　也可以直接使用返回值进行取消

var timer = requestAnimationFrame(function(){
console.log(0);
}); 
cancelAnimationFrame(1);

兼容

　　IE9-浏览器不支持该方法，可以使用setTimeout来兼容

if(!window.requestAnimationFrame){
var lastTime = 0;
window.requestAnimationFrame = function(callback){
var currTime = new Date().getTime();
var timeToCall = Math.max(0,16.7-(currTime - lastTime));
var id = window.setTimeout(function(){
callback(currTime + timeToCall);
},timeToCall);
lastTime = currTime + timeToCall;
return id;
}
} 
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}

应用

　　现在分别使用setInterval、setTimeout和requestAnimationFrame这三个方法制作一个简单的进制度效果

【1】setInterval

<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn">run</button>
<script>
var timer;
btn.onclick = function(){
clearInterval(timer);
myDiv.style.width = '0';
timer = setInterval(function(){
if(parseInt(myDiv.style.width) < 500){
myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%'; 
}else{
clearInterval(timer);
} 
},16);
}
</script>

【2】setTimeout

<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn">run</button>
<script>
var timer;
btn.onclick = function(){
clearTimeout(timer);
myDiv.style.width = '0';
timer = setTimeout(function fn(){
if(parseInt(myDiv.style.width) < 500){
myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%';
timer = setTimeout(fn,16);
}else{
clearTimeout(timer);
} 
},16);
}
</script>

【3】requestAnimationFrame

<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
<button id="btn">run</button>
<script>
var timer;
btn.onclick = function(){
myDiv.style.width = '0';
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
if(parseInt(myDiv.style.width) < 500){
myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%';
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
} 
});
}
</script>

好了，代码到此介绍，下面给大家介绍BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)

以上所述是小编给大家介绍的BOM系列第二篇之定时器requestAnimationFrame ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 使用户点击后退按钮使效三行代码

    使用户点击后退按钮使效三行代码

    使用户点击后退按钮使效三行代码...
    2007-07-07
  • js 跳出页面的frameset框架示例介绍

    js 跳出页面的frameset框架示例介绍

    很多网页都是框架结构的，在很多的情况下会通过按钮点击事件或链接，跳出框架转到其它界面。下面为大家介绍下js跳出页面的frameset框架
    2013-12-12
  • js switch case default 的用法示例介绍

    js switch case default 的用法示例介绍

    switch case default的用法应该存在一部分人不会使用吧，其实很简单就是每个case后，一定要加：break；default，就相当于else，不会的朋友可以了解下
    2013-10-10
  • 微信小程序实现侧边分类栏

    微信小程序实现侧边分类栏

    这篇文章主要为大家详细介绍了微信小程序实现侧边分类栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 浅谈类似于(function(){}).call()的js语句

    浅谈类似于(function(){}).call()的js语句

    这篇文章主要介绍了浅谈类似于(function(){}).call()的js语句,的相关资料,需要的朋友可以参考下
    2015-03-03
  • BootStrap表单宽度设置方法

    BootStrap表单宽度设置方法

    这篇文章主要介绍了BootStrap表单宽度设置方法,仅仅是小编日常遇到问题记录，写的不好还请见谅，需要的朋友可以参考下
    2017-03-03
  • bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法

    bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法

    这篇文章主要介绍了bootstrap模态框跳转到当前模板页面，框消失了，而背景依然存在问题的解决方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JS图片等比例缩放方法完整示例

    JS图片等比例缩放方法完整示例

    这篇文章主要介绍了JS图片等比例缩放方法,结合完整实例形式分析了javascript针对页面图片元素属性操作的相关技巧,需要的朋友可以参考下
    2016-08-08
  • chrome原生方法之数组

    chrome原生方法之数组

    由于各浏览器的js实现不同，因此各浏览器的原生对象（这里不涉及DOM实现，当然这也有区别）的原生方法也不尽相同，采用原生方法的好处显而易见，使用兼有效率，而且其中有些方法可能包含在以后的ECMAscript规范中
    2011-11-11
  • javaScript基础详解

    javaScript基础详解

    本文主要介绍了javaScript的基础知识，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-01-01

最新评论