javascript - setInterval 在事件监听器内不重复

Question

我正在尝试使用 JavaScript 制作贪吃蛇游戏，但无法让 setInterval 重复调用函数:

class Game {

  constructor(){
    this.xPosition = 0
    this.yPosition = 0
    this.canvas = document.getElementById("canvas");
    this.ctx = canvas.getContext("2d");
    this.drawSquare(0,0);
  }

  drawSquare(x,y){
    this.xPosition += x
    this.yPosition += y;
    if (this.xPosition < 0){
      this.xPosition = 600;
    }
    else if (this.xPosition > 600){
      this.xPosition = 0;
    }
    if (this.yPosition < 0){
      this.yPosition = 600;
    }
    else if (this.yPosition > 600){
      this.yPosition = 0;
    }
    this.ctx.fillStyle = "#FF0000";
    this.ctx.clearRect(0, 0, 600, 600);
    this.ctx.fillRect(this.xPosition,this.yPosition,60,60);
  }
  moveUp(){
    this.drawSquare(0,-60);
  }
}

var game = new Game();

//add EventListener for keyboard
window.addEventListener("keydown", e => {
  switch (e.key){
    case 'w':
      setInterval(game.moveUp,1000);
      break;
  }
});

当我运行“setInterval(game.moveUp,1000)”时，我遇到了一个 TypeError:this.drawSquare 不是一个函数。这让我很困惑，因为我在顶部清楚地定义了该函数，并且当我在没有 setInterval 的情况下在 switch case 内运行 game.moveUp() 时，错误消失了。

Answer 1

问题是 setInterval接受一个函数，并且 game.moveUp() 是一个函数调用 ¹ ，所以正确的用法是:

setInterval(game.moveUp, 1000);

¹ 不会返回另一个函数。

<小时/>

更新:这解决了回答初始问题后提出的问题。

您需要确保 this 也已绑定(bind)。请参阅下面更正后的代码(我已将其向下移动，以便您可以实际看到移动)并研究有关在 JavaScript 中绑定(bind) this 的更多信息。

class Game {

  constructor(){
    this.xPosition = 0
    this.yPosition = 0
    this.canvas = document.getElementById("canvas");
    this.ctx = canvas.getContext("2d");
    this.drawSquare(0,0);
  }

  drawSquare(x,y){
    this.xPosition += x
    this.yPosition += y;
    if (this.xPosition < 0){
      this.xPosition = 600;
    }
    else if (this.xPosition > 600){
      this.xPosition = 0;
    }
    if (this.yPosition < 0){
      this.yPosition = 600;
    }
    else if (this.yPosition > 600){
      this.yPosition = 0;
    }
    this.ctx.fillStyle = "#FF0000";
    this.ctx.clearRect(0, 0, 600, 600);
    this.ctx.fillRect(this.xPosition,this.yPosition,60,60);
  }
  moveUp(){
    console.log('move up');
    this.drawSquare(0, 60);
  }
}

var game = new Game();

//add EventListener for keyboard
window.addEventListener("keydown", e => {
  switch (e.key){
    case 'w':
      setInterval(game.moveUp.bind(game) ,1000);
      break;
  }
});

<canvas id="canvas"> </canvas>