Comment "attendre" sans bloquer (attendre occupé) en JavaScript?

Question

Salut, je suis un novice Javascript. J'ai programmé un script qui tape automatiquement une phrase sur une page, fait une pause pendant un moment, efface la div, tape automatiquement la phrase suivante et ainsi de suite. Il devrait continuellement boucle.

J'ai trouvé un problème lors de l'utilisation d'une solution JavaScript wait() trouvée. Lorsque chaque phrase est dans sa période de pause, tous les autres JavaScript sont désactivés sur la page. J'ai recherché et constaté que ceci est dû à un problème de blocage dans JavaScript, car les multi-threads n'existent pas? Compte tenu de ma situation, je n'ai pas été en mesure de trouver une solution pour permettre à la phrase de rester avant d'être effacée, tout en n'entraînant pas de blocage.

Voici mon code. Aucun conseil ?

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

utilisent deux fonctions et ajouter un autre délai d'attente au lieu de votre fonction de retard

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

utilisation SetTimeOut

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

}, 1000); 

se réfèrent à JavaScript.setTimeout