為什么setInterval無法在我制作的對象方法上工作？

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

---

也可以看看：

• 用setTimeout（）調用函數
• 如何在回調中訪問正確的“ this”？