Question

我正在尝试创建一个简单的动画，使整个屏幕上的汽车图像最多（学习练习）。我试图用setInterval实现它，这似乎不起作用。图像是静止的。请参阅以下代码：

var Car = function(x, y) {
  this.x = x;
  this.y = y;
};

Car.prototype.draw = function() {
  var carHtml = '<img src="http://nostarch.com/images/car.png">';

Car.prototype.moveRight = function(distance) {
  this.x;

  this.carElement.css({
    left: distance,
    top: this.y
  });
};

var tesla = new Car(20, 20);
tesla.draw();

function runOnInterval(fn, arg) {
  setInterval(function () {
    fn(arg);
  }, 1000);
}

runOnInterval(tesla.moveRight(), 10);

正如我所说，这导致图像静止，并且控制台中的错误消息说“fn不是函数”。谁能告诉我这里缺少什么？谢谢。

Answer 1

急切地评估参数。如果您有foo(bar())，则首先调用bar，并将其返回值传递给foo。

这就是

中发生的事情

runOnInterval(tesla.moveRight(), 10);

它会调用tesla.moveRight()并将返回值（undefined）传递给runOnInterval，然后会出错，因为undefined不是函数。

如果必须将tesla.moveRight值绑定到正确的对象，则必须通过this本身和：

runOnInterval(tesla.moveRight.bind(tesla), 10);
// or
runOnInterval(function(x) { tesla.moveRight(x); }, 10);

另见：

为什么setInterval不会对我所做的对象方法起作用？

1 个答案: