Javascript setInterval和requestanimationframe之间有什么区别？

我需要你的帮助，我有点困惑

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

来自MDN：

:

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

:

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

---

后一种方法用于动画，前一种方法可在任何时候以指定的间隔调用函数。

使用

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;
}

演示：

请注意一些区别：

• anim1

  调用

  requestAnimationFrame

  以捕获下一次更新

• anim1

  获取用于计时的参数，而

  anim2

  使用计数器

---

另外，请注意，所有浏览器都支持

setInterval

，但不支持

requestAnimationFrame

。例如，Internet Explorer 9不支持它。如果您打算使用它，最好先检查它是否存在，然后使用

setInterval

作为备用。

thanx，但是如果setInterval方法的时间间隔为16ms，它们之间的区别是什么。@Mohammad:这是发送到

requestAnimationFrame

的回调函数的值，它告诉函数经过了多少时间。这对于使动画在一定时间内移动一定距离很有用，因为该函数在不同的计算机上以不同的速率调用。