В то время как loop и setInterval()

Question

Я пытаюсь смешать исходную строку и случайным образом сравнивать элементы строки с правильными элементами в нужных индексах, и если true вставляет их в набор, чтобы восстановить исходную строку. Выполняя это, я столкнулся с проблемой, что в то время как цикл ничего не делает, просто разбивает браузер. Помогите мне с этим.

function checker() { 
    var text = document.getElementById("inp").value; 
    var a = []; 
    var i = 0; 

    while (a.length < text.length) { 
    var int = setInterval((function() { 
     var rnd = Math.floor(Math.random() * text.length); 
     if (text[rnd] === text[i]) { 
     a.push(text[rnd]); 
     clearInterval(int); 
     i++; 
     } 
    }), 100) 
    } 
} 

P.S. Мне нужна функция setInterval(), потому что мне нужно, чтобы процесс выполнялся ровно в одни и те же периоды времени.

Answer 1

Итак, вы наткнулись в ловушку большинство людей попали в какой-то момент, когда они вступают в контакт с асинхронным программированием.

Вы не можете «подождать» для завершения тайм-аута/интервала - попытка сделать это не будет работать или блокировать всю страницу/браузер. Любой код, который должен запускаться после задержки, должен быть вызван из обратного вызова, который вы передали setInterval, когда он «сделан».

В моем ответе он делает именно то, что вы хотите - создавая точно такую ​​же строку, случайно смешивая начальную, а также используя setInterval. Вы не писали, где хотите получить результат, поэтому вы написали его на консоли, а также в другом поле ввода с идентификатором output_string.

HTML:

<input id="input_string" value="some_text" /> 
<input id="output_string" value="" readonly="readonly" /> 

JavaScript:

function checker() { 
    var text = document.getElementById("input_string").value; 
    var result = ''; 

    // split your input string to array 
    text = text.split(''); 

    var int = setInterval((function() { 
     var rnd = Math.floor(Math.random() * text.length); 

     // add random character from input string (array) to the result 
     result += text[rnd]; 

     // remove used element from the input array 
     text.splice(rnd, 1); 

     // if all characters were used 
     if (text.length === 0) { 
      clearInterval(int); 

      console.log(result); 

      document.getElementById("output_string").value = result; 
     } 
    }), 100); 
} 

checker(); 

DEMO

Answer 2

Честно говоря, я понятия не имею, что вы пытаетесь сделать здесь, но, похоже, вы потеряли информацию о том, как работает ваш код.

Все ваши циклы while, создает интервал, который выполняется асинхронно из самого цикла. Другими словами, единственный способ, которым ваше условие while равно false, после нескольких 100 мс интервалов прошло. 100 миллисекунд - это вечность, сравнивая его со скоростью 1 петлевой итерации. Мы смотрим на 1000 итераций до вашего первого setInterval даже триггеров, а не то, что браузер может не отставать, не говоря уже о том, чтобы ждать нескольких из этих интервалов, прежде чем вы измените a.length.

Попробуйте больше, как это:

function checker() { 
    var text = document.getElementById("inp").value; 
    var a = []; 
    var i = 0; 

    // start to do a check every 100ms. 
    var interv = setInterval(function() { 
     var rnd = Math.floor(Math.random() * text.length); 
     if (text[rnd] === text[i]) { 
     a.push(text[rnd]); 
     i++; 
     } 

     // at the end of each call, see if a is long enough yet 
     if(a.length > text.length){ 
     clearInterval(interv); // if so, stop this interval from running 
     alert(a); // and do whatever you need to in the UI. 
     } 
    }, 100); 
    } 
}