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元素。

UPD：

 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

将函数abon_move()包含在setTimeout调用中：setTimeout(abon_move, 300);因此它将每300毫秒运行一次。

Answer 2

试试这个：

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

}

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

来引用您的班级

Javascript＆amp; jQuery：如何通过动画回调使函数无限？

2 个答案: