Question

我是编码的新手，我想用HTML，CSS和Javascript构建一个Text Adeventure游戏。我想在每个文本之间用一定时间从数组中显示许多文本的和平。由于setTimeout，我尝试了不同的方法来避免无限循环，但我没有弄清楚如何将它应用于我的代码。

这是导致崩溃的代码：

var iCounterText = 0;

var verzog = function() {
  document.getElementById('toggleText').insertAdjacentHTML('beforeBegin', '<br>--------------<br>');
  document.getElementById('toggleText').insertAdjacentHTML('beforeBegin', part1[iCounterText]);
  iCounterText = iCounterText + 1;
  playaudio();
}

function forwardingLinks() {
  while (iCounterText < part1.length - 1) {
    setTimeout(verzog, 500); // Here is the problem //
  }
  document.getElementById('buttonLinks').innerHTML = part1[part1.length - 1];
}

以下代码工作正常，但文本之间没有超时：

function forwardingLinks() {
  while (iCounterText < part1.length - 1) {
    verzog();
  }
  document.getElementById('buttonLinks').innerHTML = part1[part1.length - 1];
}

编辑：这是我的新代码“setInterval”。问题：值加1，但该函数未使用part2数组。相反，它再次使用part1 Array，尽管partvalue已经包含part2数组。

var part1 = [                          //Texte und Antworten
'Hallo?',
'Test?',
'What',
'hello',
'--------------',

'Was?'
];

var part2 = [                          //Texte und Antworten
'part2 goes on....',
'bla bla',
'blablabla'

];

var iCounterText = 0;                           
var value = 1;
var partvalue = eval("part" + value);

function forwardingLinks() { 
var verzog = setInterval(function(){
if(iCounterText < partvalue.length-2){
++iCounterText;
toggleText.insertAdjacentHTML('beforeBegin', '<br>--------------<br>');
toggleText.insertAdjacentHTML('beforeBegin', partvalue[iCounterText]);
playaudio();
}else{
    buttonLinks.innerHTML = partvalue[partvalue.length-1];
    ++value;
    iCounterText=0;
    clearInterval(verzog);

}
},500);
}

Answer 1

您误解了while循环的流程。 JavaScript在单线程环境中运行。这意味着您对verzog功能的调用将一直运行，直到forwardingLinks功能完成，但您的forwardingLinks功能无法完成，因为您有一个while循环这取决于永远不会增加的计数器，因为verzog还没有运行。

更改while循环，以便iCounterText变量从循环内增加，因此循环可以结束，然后调用verzog在事件中堆积的for队列可以开始运行。

此外，由于您使用的是数字计数器，因此常规while循环优于++iCounterText循环，因为循环的步长值（for(var iCounterText = 0; iCounterText < part1.length; ++iCounterText) { setTimeout(verzog, 500); }）是必需的：

verzog

除了你的主要问题之外，像你在// Declare a variable in a scope that is accessible throughout your code var toggleText = null, buttonLinks = null; // Set up a callback that runs after the DOM is ready window.addEventListener("DOMContentLoaded", function(){ // Scan the DOM for the element(s) you'll be needing toggleText = document.getElementById('toggleText'); buttonLinks = document.getElementById('buttonLinks'); }); function verzog() { // Now, you can just refer to the DOM element you've already found: toggleText .insertAdjacentHTML('beforeBegin', '<br>--------------<br>'); toggleText .insertAdjacentHTML('beforeBegin', part1[iCounterText]); playaudio(); } function forwardingLinks() { for(var iCounterText = 0; iCounterText < part1.length; ++iCounterText) { setTimeout(verzog, 500); } // Now, you can just refer to the DOM element you've already found: buttonLinks.innerHTML = part1[part1.length - 1]; }函数中一样，一遍又一遍地反复扫描同一元素的DOM是非常低效的。相反，只需获取一次DOM引用并将其存储在可重用的变量中：

The handshake failed due to an unexpected packet format.

'while'中的setTimeout导致浏览器崩溃。我怎么能避免呢？

1 个答案: