8

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);
}
basickarl
  • 37,187
  • 64
  • 214
  • 335
  • 3
    Also, you should avoid the setTimeout with a string, which needs to use eval, just use `setTimeout(type_phrases, 400)` – Pascal Belloncle Feb 13 '13 at 03:23
  • 1
    FYI this is not really a problem specific to javascript. If you [busy wait](http://en.wikipedia.org/wiki/Busy_waiting) in most languages this will happen. – Paul Hoenecke Feb 13 '13 at 03:32

2 Answers2

5

use setTimeout

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

}, 1000);

refer to JavaScript.setTimeout

Community
  • 1
  • 1
Pascal Belloncle
  • 11,184
  • 3
  • 56
  • 56
  • 1
    While the answer is technically correct, there are _far_ better resources to provide than W3Schools. – Matt Ball Feb 13 '13 at 03:18
  • sure! that was the top result in google... How about this one instead: http://stackoverflow.com/questions/10312963/javascript-settimeout – Pascal Belloncle Feb 13 '13 at 03:19
  • 2
    Seriously, google should block w3Schools :) – Paul Hoenecke Feb 13 '13 at 03:22
  • ok looking this over again, I figured out my solution! I was already utilizing this function to add a delay between each character typed. doh feel pretty dumb for this one now. –  Feb 13 '13 at 03:24
2

use two functions and add another timeout instead of your delay function

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 = "&nbsp;"; 
    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);
}
itsid
  • 801
  • 7
  • 16