Javascript 和 jQuery : how to make function infinite through animate callback?

Question

有一个 Abon 类的对象，然后我希望这个对象在页面上移动。

a = new Abon();
a.init();
a.move();

move() 方法包含:

function abon_move () {
  var x = this.x;
  var y = this.y;

  var direction_x = Math.random()*5 - 5;
  var direction_y = Math.random()*5 - 5;

  var x_new = x + direction_x * this.movement_rate;
  var y_new = y + direction_y * this.movement_rate;
  console.log(x_new+" "+y_new)
  $(".abonent."+this.id).animate( {
        left:+x_new,
        top:+y_new
    }, 'slow', "linear", function() { this.move() });
}

我想要的只是 move 方法(表示为函数 abon_move())在 animate 停止后一次又一次地重复。但问题是回调中显示的 this.move() 与我的对象没有任何联系，因为那个地方的 this 指向由 jQuery 选择的 HTML 元素。

更新:

 function Abon(id) {
   ...
this.move = abon_move;
   ...
 }
 Abon.prototype.move = abon_move;

和实际方法一样，只是在animate中没有回调

然后我尝试执行以下操作:

 setInterval( a[0].move , 300); //doesn't work - says `this` members are undefined
 setInterval( a[0].move() , 300); //works only one time and stops

感谢您的帮助!

Answer 1

试试这个:

function abon_move () {
    var x = this.x;
    var y = this.y;
    var class = this;
    ...

}

然后，在您的 jQuery animate 中，您可以使用变量 class

引用您的类