为什么我的页面会陷入死循环？

Question

function randomNumber(){
    var value;
    var flag = false;
    var tds = document.querySelectorAll('td');
    do{
        value = Math.round(Math.random() * (26 - 1) + 1);
        for(var t = 0; t < tds.length; t++){
            if(tds[t].innerHTML == value)
                flag = true;
        }
        if(!flag){
            return value;
        }
    }while(flag == true)
}

此函数返回一个随机数，用于新 td 的 innerHTML。如果存在与此代码生成的编号相同的其他 td，则循环再次开始。如果生成的数字是唯一的，我将其添加到新 td 的 innerHTML 中。但是我什至无法加载页面，因为我遇到了无限循环，但无论我多么努力，我都没有注意到这段代码的逻辑问题。

Answer 1

一旦您的循环找到tds[t].innerHTML == value 的情况，它将flag 设置为true - 此时您将永远无法结束循环，因为您无法检查可以将flag 设置为的情况false，因此您的循环条件将始终为真。

这里有一个类似的例子，用一个数组来说明这一点。您可以看到，有时它会将数字添加到数组中（在它找到新值的情况下），但有时循环达到 5000 次迭代并退出（因为它从未找到新值），在这种情况下它会添加 undefined到数组，因为函数没有返回任何东西。

const arr = []
function randomNumber(){
    var value;
    var flag = false;
    var tds = arr
    var iterations = 0

    do {
        value = Math.round(Math.random() * (26 - 1) + 1);
        for(var t = 0; t < tds.length; t++){
            if(tds.includes(value))
                flag = true;
        }
        if(!flag){
            return value;
        }
        iterations += 1
        console.log(iterations)
    } while(flag == true && iterations < 5000)
}

for (let i = 0;i<20;i+=1) {
  arr.push(randomNumber())
}
console.log(arr)

Answer 2

当您的函数至少一次将flag 设置为 true 时，它​​就结束了 - 它再也不会将其设置为 false。为了修复它，我添加了一行代码。

function randomNumber(){
    var value;
    var flag = false;
    var tds = document.querySelectorAll('td');
    do {
        flag = false; // this line i added
        value = Math.round(Math.random() * (26 - 1) + 1);
        for(var t = 0; t < tds.length; t++){
            if(tds[t].innerHTML == value)
                flag = true;
        }
        if(!flag){
            return value;
        }
    }while(flag == true)
}

我也会为你写一些更高效的代码

function randomNumber(){
    var value;
    var found = false;
    var tds = document.querySelectorAll('td');
    var existingIds = [];
    tds.forEach(td => existingIds.push(td.innerHHML)); // fill up the ids
    do {
        value = Math.round(Math.random() * (26 - 1) + 1); // this line would make problems (comment below)
        if (existingIds.indexOf(value) === -1) found = true; // check if value can be found in existing ids and if found - set dount to true (you can also return from here, but i would rather user break (if there was more code after this line, than use retur in the middle of any loop;
    } while(found === false)

    return value;
}

对随机线的评论：

• random() 返回从 0 到 1 的数字
• 正如您所写 - 该值将是 1 到 26 之间的随机数（仅此值）。
• 如果所有值都已被使用，那么我们的循环将不会结束（当 1 到 26 的所有值都已使用时，我们永远无法找到未使用的 1 到 26 之间的值。

可以做什么

• 在这种情况下，您可以添加一些计数器（如 @Ben 所做的那样）并退出循环。
• 或者您可以将数字 26 提高到更高
• 您可以使用连续的数字（获取全部，取最大的一个，加 1 并将其作为新数字返回）

你当然可以找到一些其他的方法来解决这个问题