What is the best way to create a pause in Javascript?

[TravelSite]

Hi,

I'm trying to learn Javascript as a precursor to Ajax and have got stuck when trying to create a simple pause/delay in my script.

Javascript doesn't have a built in pause facility, and if you do an empty for loop that lasts for a few seconds IE keeps coming up with a warning message - and I need the script to run without any user input/pop up warning messages.

setTimeout() isn't helpful as it doesn't stop the code that appears after it from executing immediately. Nor can you use an empty while loop after it (waiting for setTimeout() to change the controlling variable) as you get the same IE warning message appearing.

Eventually I managed to get things working with the following code. But it looks very messy to me. Is their a cleaner solution that this? I've spent the better part of a day trying to do a javascript pause!

Code: (the html just calls "quizfunction" onload)

// JavaScript Document
var tim,num=0,num2=0;
var first_number, second_number, operator, iterations = 5000, numbers_used=11;
var question="", answer="";
 
function quizfunction() 
{
 num++;
 if (num>iterations) // If the number of iterations has been reached then stop the function;
 {
 window.clearTimeout(tim); 
 }
 else
 {
 // I've removed the code that creates a random maths question to shortern this post
 first_number=2;
 second_number=5;
 operator=3;
 operator="*";
 question="Question Number " + num + ": " + first_number + " " + operator + " " + second_number + " = ";
 answer=first_number * second_number;
 document.getElementById('quiz').innerHTML = question; // Display Question on screen
 num2=0;
 pause(); // Creates a pause AND displays the answer on screen
 tim=window.setTimeout("quizfunction()",5000); // Recursive Call
 }
}

function pause() 
{
 num2++;
 if (num2>200) 
 {
 window.clearTimeout(tim2); 
 answer=question + " " + answer;
 document.getElementById('quiz').innerHTML = answer; // Display Question and Answer
 }
 else
 {
 tim2=window.setTimeout("pause()",0);
 //document.getElementById('quiz').innerHTML=document.getElementById('quiz').innerHTML + "!";
 }
}

As you can see I've created a "pause()" recursive function to create a pause - but the code that I want to excute after the pause (that displays the answer) has to go IN the pause() recursive function - which makes the code messy/difficult to understand. Is there a cleaner solution than this?

Thanks

[Dabrowski]

The best way to do this is just to split your function into pieces and use setTimeout. For example:

function start() { 
alert( "Starting something"); 
setTimeout( "end();", 5000); 
} 

function end() { 
alert( "5 seconds later?"); 
} 

[TravelSite]

Hi Dabrowski,

That's great thanks - so each time I need to do a pause I need to carry all the rest of the code that would normally come after it and place it into the function that does the pause.

// JavaScript Document
var num=0, iterations=10;
function quizfunction() 
{ 
 num++;
 if (num>iterations) // If the number of iterations has been reached then stop the function;
 {
 // Stop the script
 }
 else
 {
 // generate random question
 document.getElementById('quiz').innerHTML+="Question: 5+2=?<br>"; 
 setTimeout( "step2();", 4000); // pause for 4 seconds
 }
} 
function step2()
{ 
 // calculate the answer
 document.getElementById('quiz').innerHTML+="Answer: 5+2=7<br><br>"; 
 setTimeout( "quizfunction();", 2000); // pause for 2 seconds
} 

[edited by: TravelSite at 4:34 pm (utc) on Oct. 8, 2007]

[Dabrowski]

No problem, glad I could help.

It is annoying sometimes not having the pause function but it's not too difficult to code around it. You'll get used to it!