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 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
JoshChen_web格式编码UTF8-无BOM的小细节分析
但是在开发的过程中,发现一个小细节的问题,必须要打开F12才能看到的,原来,在head头部里面的所有引用的东西以及title等等,全部都跑到body里面去了,苦思冥想,百度、google全找不到答案。...2013-10-02- 这篇文章主要介绍了BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟) 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-08-24
BOM系列第二篇之定时器requestAnimationFrame
这篇文章主要介绍了BOM系列第二篇之定时器requestAnimationFrame 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-08-24理解javascript定时器中的setTimeout与setInterval
这篇文章主要帮助大家学习理解javascript定时器中的setTimeout与setInterval,从实例出发进行深入探讨,感兴趣的小伙伴们可以参考一下...2016-02-26BOM系列第一篇之定时器setTimeout和setInterval
这篇文章主要介绍了BOM系列第一篇之定时器setTimeout和setInterval 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-08-24- 这篇文章主要介绍了javascript高级定时器,针对javascript的代码队列进行详细解析,感兴趣的小伙伴们可以参考一下...2016-01-05
- 这篇文章主要介绍了JS定时器用法,结合时钟与菜单中的应用分析了JS中setInterval与setTimeout操作时间的相关技巧,需要的朋友可以参考下...2017-01-09
- 你真的了解BOM中的history对象吗?具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-02-19
- 这篇文章主要帮助大家理解javascript定时器中的单线程,感兴趣的小伙伴们可以参考一下...2016-02-26
- 这篇文章主要介绍了PHP批量去除BOM头内容信息代码的相关资料,需要的朋友可以参考下...2016-03-12
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
在utf-8编码文件中BOM在文件头部,占用三个字节,用来标示该文件属于utf-8编码,现在已经有很多软件识别bom头,但是还有些不能识别bom头,比如PHP就不能识别bom头,这也是用记事本编辑utf-8编码后执行就会出错的原因了...2016-01-07- BOM是浏览器的窗口对象,提供了很多窗口处理的API。在webapp框架越来越多的情况下,需要我们在同一窗口处理不同页面、不同的ajax数据,则需要我们熟悉BOM的内容。...2016-05-05
- 本文主要分享了在jQuery之焦点图转换-左右的基础上,将jQuery代码改成js原生,并添加定时器(setInterval()和clearInterval())的实例代码。需要的朋友可以参考借鉴...2017-01-09
- 本文主要介绍了js递归和定时器的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧...2017-02-08
- 这篇文章主要为大家介绍了JavaScript BOM对象,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助<BR>...2021-12-08
- BOM全称BrowserObjectModel浏览器对象模型,将浏览器的各个组成部分封装成对象。DOM全称DocumentObjectModel文档对象模型,将标记语言文档的各个组成部分,封装为对象。本文将详解BOM,DOM和事件的区别于用法,需要的可以参考一下...2022-06-24