Is there a JavaScript Sleep Function?

Here is my solution to having a Javascript Sleep. Its actually pretty obvious in hindsight, so I'm surprised I didn't find any one else using this technique. This is actually an excerpt from a larger class file. Anyway, this is mostly for posterity, but comments are welcome. Oh, and I'm sure there are good reasons for not normally wanting to do this, also, I suppose if you ran this for too long, browsers would throw errors or crash. I only need it for 3-5 seconds, so this isn't a problem for me.

	this.Sleep = function ZZzzzZZzzzzzzZZZz(naptime){
		naptime = naptime * 1000;
		var sleeping = true;
		var now = new Date();
		var alarm;
		var startingMSeconds = now.getTime();
		alert("starting nap at timestamp: " + startingMSeconds + "\nWill sleep for: " + naptime + " ms");
		while(sleeping){
			alarm = new Date();
			alarmMSeconds = alarm.getTime();
			if(alarmMSeconds - startingMSeconds > naptime){ sleeping = false; }
		}		
		alert("Wakeup!");
	}

This is part of a class function, and since I also set var my = this; right at the top of any JS class I write, this would be called privately as my.Sleep(5), and publicly like myObject.Sleep(5) (assuming you named the object myObject, which you probably wouldn't 😉)

Here is another solution utilizing a setTimeout approach. While it functioned similarly to the original method, it somehow felt better. Any experienced developer will understand that intuition 😎.

Here's what I did: I trimmed out code unrelated to this discussion and omitted several other methods that were not relevant. This is a substantial class, nearly 400 lines long (and it's still a work in progress).

Anyway, here it is:

function theClassAllChoppedUpForOzzu(){
	var my = this;
	var ProcessingImage;
	var NAP;
	//CODE SNIPPED...

	this.Initialize = function main(){
		//CODE SNIPPED...
		my.ProcessingImage = new Image();
		my.ProcessingImage.src = my.ModuleDir + "processing.gif";
		//CODE SNIPPED...
	}

	this.Submit = function ClickClickClicketyGoesTheWebMonkey(f){
		//CODE SNIPPED...

			my.ToggleProcessorImage(true);
			my.HTTP_Request(my.DisplayQuizResults);

		//CODE SNIPPED...
	}

	this.HTTP_Request = function sendUpHTTPRequestLikeTheSeverNeedsAnotherOne(RESPONSE_HANDLER){
		//CODE SNIPPED...
		try{
			httpRequestObj.onreadystatechange = RESPONSE_HANDLER;
			//CODE SNIPPED...
		}
		catch(err){ 
			//CODE SNIPPED...
		}
	}

	this.DisplayQuizResults = function doSomethingWithTheServersReply(){
		try{
			if(httpRequestObj.readyState == 4){
				//CODE SNIPPED...
				my.NAP = setTimeout(my.Sleep,2000);
			}
		}
		catch(err){ 
		//CODE SNIPPED...
		}
	}

	this.ShowResults = function okReallyThisWillShowTheResults(){
		my.ToggleProcessorImage(false);
		//CODE SNIPPED...
	}

	this.Sleep = function ZZzzzZZzzzzzzZZZz(){
		my.ShowResults();
		return false;
	}

	this.ToggleProcessorImage = function showTheFunnySpinnerThing(flag){
		//CODE SNIPPED...
	}
}

Regarding the function names: the class name itself is conventional, but I get creative with the private function names since they're mostly irrelevant. I use conventional names to reference them as methods, though.

/**
 *@description pause( iMilliseconds ) Cause the single Javascript thread to hald/pause/sleep/wait for a specified period of time, by opening in modalDialog window (IE only) that modally locks the browser until it returns.  This modal dialog is not opened to any page, but uses the Javascript: protocol to execute a javascript setTimeout.  In this modal context the setTimeout, has the desired affect of preventing any other script execution.  The sole purpose of the timeout execution script is to close the modal dialog which will return control/unluck the browser.  The intention was to find a way to allow the UI to be updated and rendered in the middle of function/method without the need to split the method up, remove nested calls, or use closures.  Used in this fashion to update the UI, a 0 (zero) is usually passed (or optionally omitted altogether) so that the only delay is for the UI to render.
 *@version Note Please be aware that the user interface WILL update its rendering (if you've made and DOM/CSS/Text changes they will appear) and this may significantly slow down program execution if looping.
 *@keywords pause sleep wait halt javascript show modal dialog set timeout multi-threaded single thread
 *@version 1.2
 * @param {Object} iMilliseconds [optional] the number of milliseconds the code will pause before returning - If no value is passed the code will returned immediately (as if a 0 were passed)
 * @return undefined  there is no return value from this function
 */
function pause( iMilliseconds )
{
    var sDialogScript = 'window.setTimeout( function () { window.close(); }, ' + iMilliseconds + ');';
    window.showModalDialog('javascript:document.writeln ("<script>' + sDialogScript + '<' + '/script>")');
}

I think we can implement it with less code:

We need a function that introduces a delay for a specified number of milliseconds. This can be achieved by getting the current time at the start and then using a while loop to keep checking the current time until the specified delay has passed. Essentially, the function would continuously check the current time against the start time plus the delay, creating a pause.

/**
* Delay for a number of milliseconds
*/
function sleep(delay)
{
    var start = new Date().getTime();
    while (new Date().getTime() < start + delay);
}

I think this can be solved with the setTimeout function. At least in the case where one wants to delay in a loop. If one creates a while-loop between two functions the timeout can be used in one end.

function do_something(i) {
   if (i > 30)
     return;
   // do something
   setTimeout("loop_implementation("+i+")", 10000);
}
 
function loop_implementation(i) {
   i = i + 1;
   do_something(i);
}
 

This way one can call do_something with 0 and it will be done 30 times with a 10 second delay between the steps. For an infinite loop just replace return with setting i = 0.

Here is a simple sleep solution where the JavaScript logic sets up a sequence of actions that alternate between before_wait() and after_wait() functions with a 10-second delay between each step. Here’s how it works:

function do_something(i) {
   switch(i) {
     case 0:
       before_wait();
       break;    
     case 1:
       after_wait();
       break;
     default:
       return;
   }
   setTimeout("loop_implementation("+i+")", 10000);
}
 
function loop_implementation(i) {
   i = i + 1;
   do_something(i);
}
 
function before_wait() {/* something */}
function after_wait() {/* something else */}
 

A lot of times I thought I needed sleep, I found this did the job:

function waitForCondition( interval, condition, action )
{
  if (condition())
    action();
  else
    setTimeout( 'waitForCondition( ' + interval + ', ' + condition + ', ' + action + ')', interval );
}

Simplest solution that works and doesn't chew up CPU by simply using setTimeout and a callback function:

alert('start');
  //lots of code
  var a = 'foo';
  setTimeout(function(){
    alert(a);
    //lots more code
  },5000);