页面崩溃（可能是由于多维数组？）

Question

我的程序中有一个我无法弄清楚的超级奇怪的错误。这是代码的 fiddle：https://jsfiddle.net/JocaPinto/tb07smte/4/ 我的问题是，如果你点击那个按钮的次数足够多，页面就会崩溃，至少在我的电脑上是这样。当我开始使用多维数组时就发生了这种情况，但我尝试只使用一维数组，结果仍然一样。为什么会崩溃？有没有我监督的无限循环？

感谢回答者！！

此外，出于某种原因 Stack Overflow 说我需要 post 除了 link 之外的代码所以这里是：

var tasks = [
["First Task...",2],
["Second Task...",4],
["Third Task!",6]];

function nextTask() {
 var previousText = $("#taskText").text();
 var randTaskNum = Math.floor(Math.random() * tasks.length);
 do {
  $("#taskText").text(tasks[randTaskNum][0] + tasks[randTaskNum][1]);
 } while(previousText == $("#taskText").text());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button onclick='nextTask()'>Click me</button>
<p id='taskText'>Task goes here</p>

Answer 1

如果您遇到的任务未能通过您的 "while" 检查，它永远不会失败。您不会在 do...while 循环中生成 randTaskNum，因此它永远不会改变。你的循环永远运行。将 randTaskNum 赋值移动到 do...while 循环内部。

Answer 2

当您随机分配同一个数字两次时会发生这种情况。由于您的随机数是在循环外生成的，因此 previousText == $("#taskText").text() 将始终评估为真，因为您永远不会更改该数字。快速解决方法是在循环中移动随机数：

var tasks = [
["First Task...",2],
["Second Task...",4],
["Third Task!",6]];

function nextTask() {
    var previousText = $("#taskText").text();
    do {
        var randTaskNum = Math.floor(Math.random() * tasks.length);
        $("#taskText").text(tasks[randTaskNum][0] + tasks[randTaskNum][1]);
    } while(previousText == $("#taskText").text());
}

Fiddle : https://jsfiddle.net/tb07smte/5/

更好的解决方法是防止随机数等于最后一个。

Answer 3

如果 previousTask 最终与您在函数中选择的随机任务相同，它将陷入无限循环。为了解决这个问题，选择下一个随机任务后分配上一个任务。

var tasks = [
["First Task...",2],
["Second Task...",4],
["Third Task!",6]];

function nextTask() {
   var randTaskNum = Math.floor(Math.random() * tasks.length);
     do {
        $("#taskText").text(tasks[randTaskNum][0] + tasks[randTaskNum][1]);
    } while(previousText == $("#taskText").text());
        var previousText = $("#taskText").text();

}

页面崩溃（可能是由于多维数组？）

Page crashing (possibly due to multidimensional arrays?)

html

javascript

crash

jquery

infinite-loop