setInterval 和 requestAnimationFrame 有什么区别？

Question

JavaScript 中的

setInterval

和

requestAnimationFrame

有什么区别以及何时何地使用它们？

Answer 1

requestAnimationFrame

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

这是一个示例，其中

anim1

以屏幕的速率运行，而

anim2

以固定速率运行。如果运行演示，您会看到左侧方块移动平滑，而右侧方块在移动中有点跳跃。

您可以让

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

作为后备。

Answer 2

来自MDN：

设置间隔：

重复调用函数或执行代码片段，每次调用该函数之间有固定的时间延迟。

请求动画帧：

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画，并请求浏览器在下次重绘之前调用指定的函数来更新动画。该方法将重绘之前调用的回调作为参数。

将后者用于动画，并在您想要以指定时间间隔调用函数时使用前者。