javascript - requestAnimationFrame 带有回调函数？

Question

单击按钮后，我会在 Canvas 上制作一些动画。动画完成后，我想调用一个函数，该函数作为参数传递到首先初始化 requestAnimationFrame 的函数中。

这可能吗？

我尝试了各种方法，使用匿名函数等。

var anim = false;
var game = new Game();

function Game(){
  this.turn = 1;

  this.move = function(){
    this.animate(game.advanceTurn);
  }

  this.advanceTurn = function(){
     this.turn++;
  }

  this.animate = function(callback){
    var done = false;
    anim = window.requestAnimationFrame(game.animate);

    // animation code here

    if (done){
        window.cancelAnimationFrame(anim);
        anim = false;
        callback();
    }
  }

即单击按钮，制作动画，动画完成，调用 game.advanceTurn。

在记录提供的参数时，控制台将首先记录我的回调函数，然后将其替换为我认为的计时器测量值(符合 rAF 描述的 MDN 描述)。

Answer 1

您可以使用bind来传递您的回调函数。同时您还可以传递 this，这样您就可以保留对当前 Game 对象实例的引用:

function Game(){
  var i = 0;
  var anim = false;
  
  this.turn = 1;

  this.move = function(){
    this.animate(this.advanceTurn.bind(this));
  }

  this.advanceTurn = function(){
     this.turn++;
  }

  this.animate = function(callback){
    var done = false;
    anim = window.requestAnimationFrame(this.animate.bind(this, callback));

    // animation code here
    console.log(i++);

    if (i>5){
        window.cancelAnimationFrame(anim);
        i = 0;
        anim = false;
        callback();
    }
  }
}

new Game().animate(function () {
   console.log('callback received');
});