Question

我目前遇到的问题如下：我有一个包含两行的表。第一行按字母顺序包含给定单词的字母。第二行在开始时为空。每一秒，第一行的一个字母应移动到正确的位置。这适用于前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

Answer 1

问题就在这里：

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循环将始终冻结您的浏览器。

Answer 2

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

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

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);
}

希望这可以帮助您解决问题。

Javascript - SetTimeout导致浏览器冻结

2 个答案: