关于requestAnimationFrame与setInterval的一点差异

requestAnimationFrame与setInterval都可以实现循环触发事件，但是setInterval是基于时间的，而requestAnimationFrame是基于帧数的，在我的一次开发弹幕的项目中，在一开始使用了setInterval来切换弹幕的位置，起初并没有什么问题，但是当浏览器切换回后台后，就会出现弹幕积攒过多的原因，因为我随不断的创建新的弹幕进行移动（为了考虑性能，会优先使用已经被废弃的弹幕盒），当浏览器切换到后台后，浏览器本身已经不进行页面渲染了，而我的定时器却在不断的创建新的弹幕以用来发射，当用户将浏览器切换到前台时候，会看到在一段时间内积攒的弹幕堆积到一起，最后发现是因为浏览器在后台的时候定时器还是会不断的跑的，但是在当前这种情况下我可能并不是很希望弹幕系统继续运行下去，我希望知道浏览器当前状态是在前台还是后台，如果是后台的话则暂停弹幕，然而在微信中并没有看到相关的机制，后来看到了requestAnimationFrame，requestAnimationFrame也是不断的循环执行事件，但是他是按帧执行的，而且有一个好处是当浏览器切换到后台后，requestAnimationFrame是不会再去执行事件了。这和setInterval有着本质的差异。而requestAnimationFrame之所以在浏览器进入后台不去执行的原因，应该是和浏览器进入后台后不去渲染界面有关，因为渲染界面后需要逐帧绘制，当不进行页面的选然后，也就没必要去执行帧操作了，所以requestAnimationFrame也不会去执行了

如果上述推论是正确的，那可以基此判断出setTimeout在浏览器进入后台后依然会运行，就像setInterval一样

转载于:https://www.cnblogs.com/mrzhu/p/9300406.html

关于requestAnimationFrame与setInterval的一点差异相关推荐

用requestAnimationFrame替代setInterval制作匀速动画
代码之前的介绍来自于这里requestAnimation介绍了解过事件循环机制的朋友应该知道,siteTimeout和setInterval并不是精准的时间间隔,他们要等待其他优先的执行队列执行完成 ...
vue使用优化后的动画级别的定时器 requestAnimationFrame 比setInterval, setTimeout效果要高很多
vue使用优化后的动画级别的定时器 requestAnimationFrame 比setInterval, setTimeout效果要高很多概述默认情况下,requestAnimationFram ...
javascript中正则表达式和ruby中的一点差异
看到一个例子,不过这个例子中正则表达式的格式貌似是错的: Function.prototype.get_name = function(){return this.name || this.toStr ...
DuplicateHandle在win10和xp下的一点差异
原来有个程序,需要使用DuplicateHandle,在xp下 if(DuplicateHandle(hProcess, toDuplicate,GetCurrentProcess(), &h ...
动画requestAnimationFrame
前言在研究canvas的2D pixi.js库的时候,其动画的刷新都用requestAnimationFrame替代了setTimeout 或 setInterval 但是jQuery中还是采用了s ...
python2与python3性能对比_对Python2与Python3中__bool__方法的差异详解
对Python2与Python3中__bool__方法的差异详解发布时间:2020-08-28 00:08:58 来源:脚本之家阅读:74 作者:grey_csdn 学习Python面向对象编程的 ...
嵌入式_常见延时方式的差异与选择（for循环延时、定时器延时、汇编延时....）
嵌入式_常见延时方式的差异与选择(for循环延时.定时器延时.汇编延时-) 这里整理几种常见的延时方式,并做简单测试供大家参考,如果有什么不对的地方,欢迎指正,共同探讨. 文章目录嵌入式_常见延时方 ...
HTML及css疑问解答题前端面试题
1. 什么是盒模型盒模型 margin(外边距)- 清除边框外的区域,外边距是透明的. border(边框)- 围绕在内边距和内容外的边框. padding(内边距)- 清除内容周围的区域,内边距是 ...
聊聊使用 JavaScript 做动画出现卡顿的原因
前段时间在使用 JavaScript 做动画的时候发现做出来的动画会出现卡顿的现象,今天我们主要就来聊一下卡顿的原因以及如何解决这个问题. 使用定时器实现动画出现卡顿的原因主要原因是浏览器无法确定定 ...

关于requestAnimationFrame与setInterval的一点差异

关于requestAnimationFrame与setInterval的一点差异相关推荐

最新文章

热门文章