Hi I'm a Javascript Newbie. I've programmed a script which auto types a phrase on a page, pauses for a while, clears the div, auto types the next phrase and so on. It should continuously loop.

I've found an issue when using a JavaScript wait() solution I found. When each phrase is in its pausing period, all other JavaScript is disabled on the page. I have researched and found that this is due to a blocking issue in JavaScript, as multi threads do not exist? Given my situation I have not been able to figure out a solution to allow the phrase to remain before being cleared, while also not resulting in blocking.

Below is my code. Any advice ?

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

}