RequestAnimationFrame 不丢失上下文角度 - Javascript

requestAnimationFrame 是一个浏览器 API，用于优化动画效果，避免掉帧和抖动。该 API 可以让我们在下一次浏览器渲染帧之前执行动画，这样能确保我们的动画能够顺畅运行。

在使用 requestAnimationFrame 进行动画处理时，经常会出现一个问题：如何在函数内部实现对当前上下文的访问，而不会失去它。

以下是一个错误的示例：

function animate() {
  // 先执行动画逻辑...
  requestAnimationFrame(animate);
}

这个代码片段在每次渲染帧之前都在递归调用 animate 函数，这意味着每个新的调用都会作为一个独立的函数执行，并且失去了当前上下文。

要确保保留当前上下文，可以使用 JavaScript 中的 bind 函数。bind 方法可以让我们修改函数的 this 上下文，同时还可以提供其他参数。我们可以将 bind 函数应用到 requestAnimationFrame 的回调函数中，以确保我们的回调函数与正确的上下文一起调用。

以下是正确的示例：

function animate() {
  // 先执行动画逻辑...
  requestAnimationFrame(animate.bind(this));
}

在这个代码片段中，我们在调用 requestAnimationFrame 时将 animate 函数绑定到当前上下文中。

现在，在每次渲染帧时，animate 函数将以正确的上下文调用，并且不会失去它。

requestAnimationFrame 可以确保动画过程更加流畅，而使用 bind 可以确保我们不会失去当前上下文。如果您正在使用 requestAnimationFrame，请记住这个技巧，以确保您的动画在正确的上下文中运行。