Question

单击按钮后，我会在画布上设置一些动画。一旦动画完成，我想调用一个函数，该函数作为参数传递给首先初始化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');
});

Answer 2

你没有正确地写你的课。

在Game班级中，您使用的是变量game，但您应该使用this。

例如，

window.requestAnimationFrame(game.animate);

应该是

window.requestAnimationFrame(this.animate);

为什么要将anim设为false？ requestAnimationFrame returns a non-zero number of type `long.

this.turn应该从0开始，而不是一个。

move调用animate没有意义。

事实上，你试图使用的结构是挖掘你的坟墓。

我认为你最好重新开始，并且第二次就做好。

Try this tutorial :)

requestAnimationFrame具有回调函数？

2 个答案: