requestAnimationFrame与此关键字

Question

我使用webkitRequestAnimationFrame但我使用一个对象的内部有问题。如果我通过了this关键字它将使用window，我不能找到一种方法它使用指定的对象，而不是。

例子：

Display.prototype.draw = function(){ 
    this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height); 
    //Animation stuff here. 

    window.webkitRequestAnimationFrame(this.draw); 
}; 

我也试过，但无济于事：

Display.prototype.draw = function(){ 
    this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height); 
    //Animation stuff here. 

    var draw = this.draw; 
    window.webkitRequestAnimationFrame(draw); 
}; 

Answer 1

I'm trying to pass display.draw which is the function in which webkitRequestAnimationFram resides.

webkitRequestAnimationFrame大概会打电话给你传递的功能，这样的事情：

function webkitRequestAnimationFrame(callback) 
{ 
    // stuff... 
    callback(); 
    // other stuff... 
} 

此时，您已将其draw函数与其调用上下文分离（分离）。你需要的功能（draw）绑定到其上下文（的Display实例）。

您可以使用Function.bind，但是这个requires JavaScript 1.8 support（或只是使用建议的补丁）。

Display.prototype.draw = function() 
{ 
    // snip... 

    window.webkitRequestAnimationFrame(this.draw.bind(this)); 
}; 

Answer 2

这个怎么样：

Display.prototype.draw = function(){ 
    this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height); 
    //Animation stuff here. 

    window.webkitRequestAnimationFrame($.proxy(function() {this.draw()}, this)); 
}; 

...假设你使用jquery

Answer 3

你还没有使用 “这个”。 保持简单。

var game = { 
     canvas:null, 
     context:null, 

    init:function(){ 
      // init canvas, context, etc 
    },  

    update:function(){ 
     //do something 
     game.render();       
     requestAnimationFrame(game.update, game.canvas);   
    },    
}; 

Answer 4

，你也可能要使用requestAnimationFrame垫片使它在所有的浏览器https://github.com/kof/animation-frame

Answer 5

我不能保证，这是一个好主意，我是正确的，但.bind运行对每个requestAnimationFrame意味着在每次迭代中创建一个新函数。这听起来并不正确。

这就是为什么在我的项目，我缓存绑定功能，避免反模式。

简单的例子：

var Game = function() { 
    this.counter = 0; 
    this.loop = function() { 
     console.log(this.counter++); 
     requestAnimationFrame(this.loop); 
    }.bind(this); 
    this.loop(); 
} 
var gameOne = new Game(); 

如果你有原型继承一​​个更复杂的项目，您还可以创建一个缓存的功能“这”必将在对象的构造

var Game = function() { 
    this.counter = 0; 
    this.loopBound = this.loop.bind(this); 
    this.loopBound(); 
} 
Game.prototype.loop = function() { 
    console.log(this.counter++); 
    requestAnimationFrame(this.loopBound); 
} 
var gameOne = new Game(); 

的思考？ http://jsfiddle.net/3t9pboe8/（在控制台看）现在

Answer 6

是ES6/2015这里，如果你使用的是transpiler然后一个箭头功能词汇this绑定，而不是：

window.webkitRequestAnimationFrame(this.draw.bind(this)); 

，你可以这样做：

window.webkitRequestAnimationFrame(() => this.draw()); 

这是有点清洁器。

我已经有效地将这个与Typescript转换为ES5。