有没有办法取消没有全局变量的requestAnimationFrame吗? [英] Is there a way to cancel requestAnimationFrame without a global variable?

问题描述

我正试图取消 requestAnimationFrame 循环，但是我不能这样做，因为每次调用 requestAnimationFrame 时，都会返回一个新的计时器ID，但是我仅有权访问第一次调用 requestAnimationFrame 的返回值.
具体来说，我的代码是这样的，我认为这种情况并不罕见:

I'm trying to cancel a requestAnimationFrame loop, but I can't do it because each time requestAnimationFrame is called, a new timer ID is returned, but I only have access to the return value of the first call to requestAnimationFrame.
Specifically, my code is like this, which I don't think is entirely uncommon:

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 .

Because all subsequent calls to requestAnimationFrame are within the step function, I don't have access to the returned timer ID in the event that I want to call cancelAnimationFrame.

看 Mozilla的方式(显然其他人也这样做)，看起来他们在代码中声明了全局变量(在Mozilla代码中为 myReq )，然后将对 requestAnimationFrame 的每次调用的返回值分配给该变量，以便它可以随时用于 cancelAnimationFrame .

Looking at the way Mozilla (and apparently others do it), it looks like they declare a global variable in their code (myReq in the Mozilla code), and then assign the return value of each call to requestAnimationFrame to that variable so that it can be used any time for cancelAnimationFrame.

有什么方法可以在不声明全局变量的情况下进行此操作吗?
谢谢.

Is there any way to do this without declaring a global variable?
Thank you.

推荐答案

它不必是全局变量；它可以是全局变量.它只需要具有作用域，以使 animate 和 cancel 都可以访问它.IE.您可以封装它.例如，如下所示:

It doesn't need to be a global variable; it just needs to have scope such that both animate and cancel can access it. I.e. you can encapsulate it. For example, something like this:

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.

您不需要每次 进行编码-这就是为什么我们一直在进行编程以提取重复的内容，所以我们不需要自己进行编程.:)

You don't need to code it every time - that's why we are doing programming, after all, to abstract stuff that repeats so we don't need to do it ourselves. :)

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吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！