原文引用https://www.dazhuanlan.com/2019/08/26/5d6302d0e0238/
在 Javascript 我们曾经只有一种方式来处理跟特定时间有关的循环事件: setInterval()
。简单说就是当你需要重复某些任务时(依据时间)。
您就会用到这个方法。对于动画来说需要每秒 60 个 frames
人类才会觉得是顺畅平滑的,因此我们可能会写出像下面这样的程序
1 |
setInterval(function () { |
除了这个方式,还有另外一种方式就是使用 requestAnimationFrame
,当然这个东西已经出现很久了,不过在这之前,大多的时候我都不需要自己造轮子,也不太有机会需要对于动画有深入的处理。
因为自己开发一些轮子的需求所以这篇文章会了解一些关于 requestAnimationFrame
的基本用法。
简单说使用 requestAnimationFrame
有下面几点好处
1 |
function () { |
启动/停止
requestAnimationFrame
会回传一个 ID
我们可以用这个 ID 来取消它,就类似 setTimeout
, setInterval
。
下面我们用 jQuery 简单的展示一个范例
1 |
var globalID; |