Javascript-SetTimeout导致浏览器冻结

Javascript - SetTimeout causes Browser to freeze

本文关键字：冻结 浏览器 Javascript-SetTimeout      更新时间：2023-09-26

我目前遇到的问题如下：我有一张两排的桌子。第一行按字母顺序包含给定单词的字母。第二行的开头是空的。每隔一秒钟，第一行中的一个字母应移动到正确的位置。这对前5个字母来说是正确的，但之后什么都没有发生，过了很短时间，浏览器冻结了，我收到一个提示，要求停止skript或保持它运行。这是我的代码

test.html:
<!DOCTYPE html>
<html>
<head>
    <script src=".'test.js"></script>
</head>
<body>
<div onclick="m_show_letter_example()">
    <table>
        <tr>
            <td><input id="example_01" name="example_alphabet_01" type="text" value="A"/></td>
            <td><input id="example_02" name="example_alphabet_02" type="text" value="E"/></td>
            <td><input id="example_03" name="example_alphabet_03" type="text" value="E"/></td>
            <td><input id="example_04" name="example_alphabet_04" type="text" value="L"/></td>
            <td><input id="example_05" name="example_alphabet_05" type="text" value="M"/></td>
            <td><input id="example_06" name="example_alphabet_06" type="text" value="P"/></td>
            <td><input id="example_07" name="example_alphabet_07" type="text" value="S"/></td>
            <td><input id="example_08" name="example_alphabet_08" type="text" value="X"/></td>
        </tr>
        <tr>
            <td><input id="example_solution_02" name="example_solution_02" type="text"/></td>
            <td><input id="example_solution_08" name="example_solution_08" type="text"/></td>
            <td><input id="example_solution_01" name="example_solution_01" type="text"/></td>
            <td><input id="example_solution_05" name="example_solution_05" type="text"/></td>
            <td><input id="example_solution_06" name="example_solution_06" type="text"/></td>
            <td><input id="example_solution_04" name="example_solution_04" type="text"/></td>
            <td><input id="example_solution_03" name="example_solution_03" type="text"/></td>
            <td><input id="example_solution_07" name="example_solution_07" type="text"/></td>
        </tr>
    </table>
</div>
</body>

和javascript文件：

test.js
var timeout = null;
function m_show_letter_example()
{
  timeout = setTimeout(function()
  { 
    var inputs = document.getElementsByTagName('input');
    var unplaced_letters = [];
    for (var input_index = 0; input_index < inputs.length; ++input_index)
    {
        if (inputs[input_index].name.indexOf('example_alphabet_') == 0) {
            unplaced_letters.push(inputs[input_index]);
        }
    }
    var random_index = 0;
    var field = document.getElementsByName('example_alphabet_0' + random_index);
    while (document.getElementsByName('example_alphabet_0' + random_index).length == 0 )
    {
        random_index = Math.floor( (Math.random() * unplaced_letters.length) + 1);
    }
    var letter = document.getElementById('example_0' + random_index);
    var solution = document.getElementById('example_solution_0' + random_index);
    solution.value = letter.value;
    letter.value = "";
    letter.name = "used";
    m_show_letter_example();
  }, 1000);
}

我很乐意听到任何关于为什么会发生这种情况以及如何解决这种问题的见解。如果重要的话，我已经在Firefox和Chrome中测试过了。提前感谢

编辑：添加了test.js

问题是由于while循环中的随机数选择。当有3个值时，这个循环将进入无限循环。

我在脚本文件中做了一些更改，还为每个example_alphabet_input标记添加了一个数据索引属性。

var timeout = null;
function m_show_letter_example()
{
  timeout = setTimeout(function()
 { 
    var unplaced_letters =  document.querySelectorAll("input[name^='example_alphabet_']");
    var unplaced_index = []
    for (var input_index = 0; input_index < unplaced_letters.length; ++input_index)
    {
        unplaced_index.push(unplaced_letters[input_index].getAttribute('data-index'));
    }
    var random_index = 0;
    var field = document.getElementsByName('example_alphabet_0' + random_index);
    while (document.getElementsByName('example_alphabet_0' + random_index).length == 0 )
    {
        random_index = unplaced_index[Math.floor( (Math.random() * unplaced_index.length))];
    }
    var letter = document.getElementById('example_0' + random_index);
    var solution = document.getElementById('example_solution_0' + random_index);
    solution.value = letter.value;
    letter.value = "";
    letter.name = "used";
    m_show_letter_example();
  }, 1000);
}

希望这能帮助你解决问题。

问题就在这里：

while (document.getElementsByName('example_alphabet_0' + random_index).length == 0 )
{
    random_index = Math.floor( (Math.random() * unplaced_letters.length) + 1);
}

当此条件为真时

document.getElementsByName('example_alphabet_0' + random_index).length == 0

并且返回的长度始终为0，while循环将无限期运行，因为没有条件停止它。无休止的while循环总是会冻结您的浏览器。

相关文章：