有没有办法在没有全局变量的情况下取消 requestAnimationFrame？

Question

我正在尝试取消 requestAnimationFrame 循环，但我做不到，因为每次 requestAnimationFrame 被调用时，都会有一个新的计时器 ID returned，但是我只能访问第一次调用 requestAnimationFrame 的 return 值。
具体来说，我的代码是这样的，我认为这并不罕见：

function animate(elem) {

  var step = function (timestamp) {

    //Do some stuff here.
    if (progressedTime < totalTime) {
      return requestAnimationFrame(step); //This return value seems useless.
    }

  };

  return requestAnimationFrame(step);

}

//Elsewhere in the code, not in the global namespace.
var timerId = animate(elem);

//A second or two later, before the animation is over.
cancelAnimationFrame(timerId); //Doesn't work!

因为对 requestAnimationFrame 的所有后续调用都在 step 函数内，所以如果我想调用 returned 计时器 ID，我将无权访问 cancelAnimationFrame.

看Mozilla (and apparently others do it)的方式，好像他们在代码中声明了一个全局变量（Mozilla代码中的myReq），然后给每个变量赋值return调用 requestAnimationFrame 到该变量，以便它可以随时用于 cancelAnimationFrame.

有没有不声明全局变量的方法？
谢谢。

Answer 1

不需要是全局变量；它只需要具有 animate 和 cancel 都可以访问它的范围。 IE。你可以封装它。例如，像这样：

var Animation = function(elem) {
  var timerID;
  var step = function() {
    // ...
    timerID = requestAnimationFrame(step);
  };
  return {
    start: function() {
      timerID = requestAnimationFrame(step);
    }
    cancel: function() {
      cancelAnimationFrame(timerID);
    }
  };
})();

var animation = new Animation(elem);
animation.start();
animation.cancel();
timerID; // error, not global.

编辑：你不需要每次都编码 - 这就是我们进行编程的原因，毕竟，抽象重复的东西所以我们不需要我们自己做。 :)

var Animation = function(step) {
  var timerID;
  var innerStep = function(timestamp) {
    step(timestamp);
    timerID = requestAnimationFrame(innerStep);
  };
  return {
    start: function() {
      timerID = requestAnimationFrame(innerStep);
    }
    cancel: function() {
      cancelAnimationFrame(timerID);
    }
  };
})();
var animation1 = new Animation(function(timestamp) {
  // do something with elem1
});
var animation2 = new Animation(function(timestamp) {
  // do something with elem2
});

有没有办法在没有全局变量的情况下取消 requestAnimationFrame？

Is there a way to cancel requestAnimationFrame without a global variable?

javascript

global-variables

requestanimationframe

cancelanimationframe