Javascript - SetTimeout заставляет браузер замораживать

Проблема, с которой я сейчас сталкиваюсь, - это следующее: У меня есть таблица из двух строк. Первая строка содержит буквы данного слова в алфавитном порядке. Вторая строка пуста в начале. Каждую секунду одна буква из первой строки должна быть перемещена в правильное положение. Это правильно работает для первых 5 букв, но потом ничего не происходит больше, и через короткое время браузер замерзает, и я получаю подсказку, требуя остановить скрипт или сохранить его. Вот мой код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. Заранее спасибо

Edit: добавлена test.js

источник

2016-05-14 frangge

Где/что такое test.js? – Eric

У вас, очевидно, есть цикл, который может или никогда не остановится. Показать JS – mplungjan

@ Эрик: thx, добавленный – frangge

Проблема связана с выбором случайного числа во время цикла. Когда есть 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); 
}

Надеюсь, это поможет вам в решении проблемы.

источник

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 заставляет браузер замораживать

ответ

Смежные вопросы