Question

我的脚本运行但是当它到达setTimeout部分时它只是不喜欢它:( 浏览器崩溃了，我不得不退出。浏览器是错误的还是我不知所措？

var health=100;
var ehealth=100;
var atk;
var eatk;

function attack(x){
x=Math.floor(Math.random()*11);
atk=x;
ehealth=ehealth-atk
document.write('Enemy Health:' + '&nbsp; &nbsp;' + ehealth + '&nbsp; &nbsp;')
}

function eattack(x){
x=Math.floor(Math.random()*11);
eatk=x;
health=health-eatk
document.write('Health:' + '&nbsp; &nbsp;' + health )
}

function dead(){
if(health<=0){
    document.write('You Lose');
}else{
    if(ehealth<=0){
  document.write('You Win');
}
}
}

function battle(){
document.write('Enemy Health:' + '&nbsp; &nbsp;' + ehealth + '&nbsp; &nbsp; Health: &nbsp; &nbsp;' + health + '<br/>\n')
while(health>=0&&ehealth>=0){
setTimeout(function(){
    attack(0)
},400)
setTimeout(function(){
eattack(0)
},400)
document.write("<br/>\n");
dead();
}
}

我该怎么办:(

Answer 1

问题是你的while循环：

while(health>=0&&ehealth>=0){
setTimeout(function(){
    attack(0)
},400)

你正在设置攻击功能以执行“无限”的时间。

Answer 2

你的while循环没有终止。你触发了无休止的setTimeout（）回调流，但由于JS只在一个线程中执行，所以这些回调都不会被执行。

让我们看看会发生什么更详细的事情：

在事件循环中（要执行JS代码的队列）起初只有你的战斗功能。

在while循环的第一次迭代之后，事件循环仍然如下所示：

battle | attack | eattack

使用setTimeout()的函数排在battle()函数后面。在下一次迭代之后，它看起来像这样

battle | attack | eattack | attack | eattack

但仍然没有执行(e)attack()函数，因此health和ehealth变量保持不变。这种情况一直持续下去，直到您的浏览器吃完所有内存并发生故障。

作为解决方案，我建议引入类似的内容：

function battleRound() {
  attack(0);
  eattack(0);

  dead();

  if( health>=0&&ehealth>=0 ) {
    // still a round to go
    setTimeout( battleRound, 400 );
  }
}

不要排队多种功能，只需将一轮战斗排列在另一轮之后，直到战斗结束。

Answer 3

通常，您的代码会尝试设置无限数量的超时处理程序。

setTimeout设置将来要运行的某个函数，但它会立即结束运行，不会等到函数运行。因此，循环无限运行，因为内部没有任何东西可以改变健康状况。

其他更好的解决方案是使用间隔 - 例如：

var game_interval;

function turn () {
  attack(0);
  eattack(0);
  if (health<=0 || ehealth<=0) {
    clearInterval(game_interval);
    dead();
  }
}

game_interval = setInterval(400,turn);
turn(); // first turn immediately

我的脚本崩溃了浏览器

3 个答案: