Question

无论我做什么，我都无法使用这段代码，在draw方法中设置间隔的部分将在两秒内调用Loop方法4次，每次调用显示不同的图像。目前它什么都没显示？问题不在于图像等，因为它可以很好地处理一个图像。在这2天.. ..

 function Explosion() //space weapon uses this
{
this.srcX = 0;
this.srcY = 1250;
this.drawX = 0;
this.drawY = 0;
this.width = 70;
this.height = 70;
this.currentFrame = 0;
this.totalFrames = 10;
this.hasHit = false;
this.frame = 0;

}

Explosion.prototype.draw = function()
{

 if(this.hasHit == true && this.frame < 5)
 {

    var t=setTimeout(Explosion.Loop,500);

 }

 if(this.frame == 5)
 {
 clearTimeout(t);
 this.hasHit = false;
  this.frame = 0;
 }



}

Explosion.prototype.Loop = function()
{

ctxExplosion.clearRect ( 0 , 0, canvasWidth , canvasHeight );

if(this.frame == 1)
{

   ctxExplosion.drawImage(spriteImage,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
   frame++;
}

else if(this.frame == 2)
{

    ctxExplosion.drawImage(spriteImage,this.srcX,(this.srcY + 77),this.width,this.height,this.drawX,this.drawY,this.width,this.height);
   frame++;
}

else if(this.frame == 3)
{
  ctxExplosion.drawImage(spriteImage,this.srcX,(this.srcY + 154),this.width,this.height,this.drawX,this.drawY,this.width,this.height);
   frame++;

}

else if(this.frame == 4)
{
  ctxExplosion.drawImage(spriteImage,this.srcX,(this.srcY + 231),this.width,this.height,this.drawX,this.drawY,this.width,this.height);
   frame++;

}


}

Answer 1

你遇到了一些问题：

Explosion.Loop不存在;在普通的经典语言中，您的错误将被称为“尝试将实例方法调用为静态”。您可以做的是传递Explosion.prototype.Loop或this.Loop，但这也不好：JavaScript的this是动态的，您最终会尝试获取并设置{{1}的属性而不是你的对象。

您需要做的是使用window，但要确保this.Loop不会丢失。在较新的浏览器上，可以使用this ¹：
完成
```
bind
```
¹如果他们足够新以支持setTimeout(this.Loop.bind(this), 500);，他们可能会支持canvas。
bind只会调用您的函数;如果您希望每半秒调用一次，而不是仅从现在开始调用半秒，则需要使用setTimeout代替。
访问实例变量，就像它们是局部变量一样。在多个地方（例如，setInterval中的frame），您正在访问{{1像这样：
```
Loop
```
不幸的是，frame不是局部变量;它是frame++;的属性。与其他一些语言不同，您必须明确限定它：
```
frame
```
如前所述，this并非唯一存在此问题的变量。

无法设置间隔工作？

1 个答案: