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：

setInterval：

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

requestAnimationFrame：

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

只要您想以指定的间隔调用函数，就可以将后者用于动画和前者。

setInterval和requestanimationframe有什么区别？

2 个答案: