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 phrasesphrases[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 = "&nbsp;";           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's user avatar
basickarl
41.2k70 gold badges239 silver badges358 bronze badges
askedFeb 13, 2013 at 3:14
2
  • 3
    Also, you should avoid the setTimeout with a string, which needs to use eval, just usesetTimeout(type_phrases, 400)CommentedFeb 13, 2013 at 3:23
  • 1
    FYI this is not really a problem specific to javascript. If youbusy wait in most languages this will happen.CommentedFeb 13, 2013 at 3:32

2 Answers2

5

use setTimeout

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

refer toJavaScript.setTimeout

answeredFeb 13, 2013 at 3:17
Pascal Belloncle's user avatar
Sign up to request clarification or add additional context in comments.

4 Comments

While the answer is technically correct, there arefar better resources to provide than W3Schools.
sure! that was the top result in google... How about this one instead:stackoverflow.com/questions/10312963/javascript-settimeout
Seriously, google should block w3Schools :)
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.
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 phrasesphrases[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);}
answeredFeb 13, 2013 at 3:37
itsid's user avatar

Comments