requestAnimationFrame 笔记

原文引用https://www.dazhuanlan.com/2019/08/26/5d6302d0e0238/

在 Javascript 我们曾经只有一种方式来处理跟特定时间有关的循环事件: setInterval()。简单说就是当你需要重复某些任务时(依据时间)。
您就会用到这个方法。对于动画来说需要每秒 60 个 frames 人类才会觉得是顺畅平滑的，因此我们可能会写出像下面这样的程序

1 2 3

setInterval(function () { }, 1000/60)

除了这个方式，还有另外一种方式就是使用 requestAnimationFrame ，当然这个东西已经出现很久了，不过在这之前，大多的时候我都不需要自己造轮子，也不太有机会需要对于动画有深入的处理。
因为自己开发一些轮子的需求所以这篇文章会了解一些关于 requestAnimationFrame 的基本用法。

简单说使用 requestAnimationFrame 有下面几点好处

1 2 3 4 5

function () { requestAnimationFrame(repeatOften) } requestAnimationFrame(repeatOften)

启动/停止

requestAnimationFrame 会回传一个 ID 我们可以用这个 ID 来取消它，就类似 setTimeout, setInterval。
下面我们用 jQuery 简单的展示一个范例

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var globalID; function repeatOften () { $('<div />').appendTo('body'); globalID = requestAnimationFrame(repeatOften); } $("#start").on("click", function() { globalID = requestAnimationFrame(repeatOften); }); $("#stop").on("click", function() { cancelAnimationFrame(globalID); });

参考

• polyfill
• CSS-Tricks