Как «ждать» без блокировки (ожидание ожидания) в JavaScript?

Question

Привет, я новичок в Javascript. Я запрограммировал скрипт, который автоматически набирает фразу на странице, временно приостанавливается, очищает div, автоматически вводит следующую фразу и так далее. Он должен непрерывно контура.

Я нашел проблему при использовании решения JavaScript wait(), которое я нашел. Когда каждая фраза находится в периоде паузы, все остальные JavaScript отключены на странице. Я исследовал и обнаружил, что это связано с проблемой блокировки в JavaScript, поскольку много потоков не существует? Учитывая мою ситуацию, я не смог найти решение, позволяющее фразе оставаться до того, как будет очищено, а также не приведет к блокировке.

Ниже приведен мой код. Любой совет ?

var index = 0; 
var phrases = new Array(); 

//add a new variable to the array to add new phrases 
phrases[0] = "Type the first phrase."; 
phrases[1] = "Type the second..."; 
phrases[2] = "Type the third..."; 

var split_chars = phrases[index].split(""); 

function type_phrases() 
{ 
    if(split_chars.length > 0) { 
     document.getElementById('matrix_typer').innerHTML += split_chars.shift(); 
     } 
     else { 
     clearTimeout(loopTimer); 
     wait(10000);//add a delay before the next phrase is typed 
     document.getElementById('matrix_typer').innerHTML = " "; 
     index += 1; 

     if(index >= phrases.length) 
     { 
     index = 0; 
     } 
     split_chars = phrases[index].split("");  
     } 
    loopTimer = setTimeout('type_phrases()',400); 

} 

function wait(ms) { 
    var start = +(new Date()); 
    while (new Date() - start < ms); 
} 

Answer 1

использования двух функций и добавить еще один тайм-аут вместо вашей функции задержки

var phrases = new Array(); 

//add a new variable to the array to add new phrases 
phrases[0] = "Type the first phrase."; 
phrases[1] = "Type the second..."; 
phrases[2] = "Type the third..."; 

var index = 0; 
var split_chars = phrases[index].split(""); 

function type_phrase() 
{ 
    document.getElementById('matrix_typer').innerHTML = " "; 
    split_chars = phrases[index].split(""); 

    return type_char(); 
} 

function type_char() 
{ 
    if(split_chars.length > 0) 
    { 
     document.getElementById('matrix_typer').innerHTML += split_chars.shift(); 
    } 
    else 
    { 
     clearTimeout(charloopTimer); 
     phraseloopTimer = setTimeout('type_phrases()',1000); //set a timeout instead of a delay 
     index += 1; 
     if(index >= matrix_phrases.length) 
      index = 0; 
    } 
    charloopTimer = setTimeout('type_char()',400); 
} 

Answer 2

использование SetTimeout

setTimeout(function() { 
    // do something 1000ms later here. 

}, 1000); 

см JavaScript.setTimeout