我试图每秒钟在一个构造函数中调用一个方法15秒但是setInterval似乎不起作用

时间:2015-06-09 22:32:35

标签: javascript canvas

代码 - 也可用here

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#000000" ;
ctx.fillRect(0,0,600,600);
ctx.fillStyle ="#ffffff";

var entities = [];
var x;
var y;

function ship(x, y) {
  entities.push(entities.length-1);
  this.name = entities.length-1;
  this.draw = function(){
    ctx.fillRect(x,y,30,30);
  };

  this.update = function(){
    x+=10;
    this.draw();
  }; 
}

var bob = new ship(0,0);
bob.draw();

var intervalID = setInterval(bob.update(), 1000);
setTimeout(function() {
  clearInterval(intervalID);
}, 18000);

基本上,我在左上角画了一个正方形。然后我尝试使用一种方法实时移动它。当我使用for循环时,我可以看到方形移动了,但它显然移动得太快甚至没有注意到。

3 个答案:

答案 0 :(得分:1)

将index.html中的第48行更改为

 var intervalID = setInterval(function(){bob.update()}, 1000);

你应该好。

答案 1 :(得分:1)

您需要将绑定引用传递给bob.update

var intervalID = setInterval(bob.update.bind(bob), 1000);

答案 2 :(得分:1)

我没有运行代码,但这看起来是你的问题

setInterval(bob.update(), 1000)

setInterval的第一个参数需要是一个函数对象 - 在本例中是船舶对象的update函数。

在上面的语句中,您实际上是调用 update函数,因此传递给setInterval的内容不是update函数本身,而是通过调用它返回的值 - 这是未定义 - 所以你的setInterval没有任何东西,每一秒。

您需要将更新函数“绑定”到bob对象,以便在每个间隔实际调用它时this的值是bob对象的this。 / p>

将其更改为此,即传递绑定到bob对象的update函数,然后再次尝试运行

setInterval(bob.update.bind(bob), 1000)