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');
});