javascript - setInterval 和 requestanimationframe 有什么区别？

Question

我需要你的帮助，我有点迷茫。

我的问题是 JavaScript 中的 setInterval 和 requestanimationframe 之间有什么区别，以及何时何地使用它们？

Answer 1

requestAnimationFrame 方法用于将动画与屏幕更新同步。屏幕以特定速率更新，例如每秒 60 次。如果您同步动画更新以使其以该速率发生，则动画看起来会很流畅。

这是一个示例，其中 anim1 以屏幕的速率运行，而 anim2 以固定速率运行。如果您运行演示，您会看到左边的方 block 移动平稳，而右边的方 block 在运动中有一点跳跃。

您可以使 setInterval 运行得更频繁，使其更流畅一些，但要使其支持所有不同的屏幕，您必须使其运行速度超过每秒 120 次，这使用了CPU 比大多数屏幕所需的多得多，有些浏览器甚至不支持这么快的速率。

window.requestAnimationFrame(anim1);

window.setInterval(anim2, 25);

var a1 = document.getElementById('a1');
var a2 = document.getElementById('a2');
var t2 = 0;

function anim1(t1) {
    a1.style.left = (50 + Math.cos(t1 / 500) * 30) + 'px';
    a1.style.top = (50 + Math.sin(t1 / 500) * 30) + 'px';
    window.requestAnimationFrame(anim1);
}

function anim2() {
    a2.style.left = (100 + Math.cos(t2) * 30) + 'px';
    a2.style.top = (50 + Math.sin(t2) * 30) + 'px';
    t2 += 0.055;
}

演示:http://jsfiddle.net/qu2Dc/2/

注意一些区别:

• anim1 调用 requestAnimationFrame 来捕获下一次更新。
• anim1 获取用于计时的参数，而 anim2 使用计数器。

另请注意，所有浏览器都支持 setInterval，但不支持 requestAnimationFrame。例如，Internet Explorer 9 不支持它。如果您打算使用它，最好先检查它是否存在，然后使用 setInterval 作为备用。