[javascript] requestAnimationFrame с этим ключевым словом


2 Answers

Теперь, когда ES6 / 2015 здесь, если вы используете транспилятор, тогда функция стрелки имеет лексическую привязку, поэтому вместо:

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

ты можешь сделать:

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

который немного чище.

Я использовал это эффективно с перепиской Typcript на ES5.

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



А также вы можете использовать прошивку requestAnimationFrame, чтобы она работала во всех браузерах https://github.com/kof/animation-frame




Я не могу гарантировать, что это хорошая идея, и что я прав, но работает .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/ (смотрите в консоли)




Related