Question

我正在尝试取消requestAnimationFrame循环，但我不能这样做，因为每次调用requestAnimationFrame时，都会返回一个新的计时器ID，但我只能访问返回第一次拨打requestAnimationFrame的价值。
具体来说，我的代码是这样的，我认为这并不完全不常见：

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函数内，所以如果我想调用cancelAnimationFrame，我无权访问返回的计时器ID。

看看Mozilla (and apparently others do it)的方式，看起来他们在代码中声明了一个全局变量（Mozilla代码中的myReq），然后将每次调用的返回值赋给{{1} }到该变量，以便它可以随时用于requestAnimationFrame。

在没有声明全局变量的情况下，有没有办法做到这一点？谢谢。

Answer 1

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

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？

1 个答案: