Javascript - SetTimeout导致浏览器冻结

我目前遇到的问题如下：我有一个包含两行的表。第一行按字母顺序包含给定单词的字母。第二行在开始时是空的。每秒钟，第一行的一个字母应移动到正确的位置。这对于前5个字母是正确的，但是之后什么也没有发生，并且在很短的时间之后，浏览器冻结，并且我得到提示，要求停止skript或者保持它运行。这里是我的代码Javascript - SetTimeout导致浏览器冻结

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

来源

2016-05-14 frangge

什么是test.js？ – Eric

你显然有一个可能或可能永远不会停止的循环。显示JS – mplungjan

@Eric：thx，addded – frangge

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

我在脚本文件中做了很少的改动，并且还为每个example_alphabet_输入标签添加了一个data-index属性。

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

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

来源

2016-05-14 20:12:29 Bkjain655

问题就在这里：

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

来源

2016-05-14 18:56:12

Javascript - SetTimeout导致浏览器冻结

回答

相关问题