JavaScript Sleep Function

All,

I searched all around looking for a way to do an actual sleep function (Thread.Sleep, wait, sleep(), take your pick...) in JavaScript, and there were many posts around that use setInterval or setTimeout, there were none that actually did a real sleep.

The problem is, the setTimeout function immediately returns control to its container after it sets the timer. So, if you setTimeout(funct(),1000), and its container runs for 5 seconds longer, the last 4 seconds will see BOTH functions running at the same time. Now, arguably, this is good in some cases, perhaps even most cases as it relates to JavaScript applications. However, in an application I've been working on recently, I needed to actually sleep for a couple seconds. Literally make the script stall. The reason is, I'm using AJAX to retrieve some data, but its a very fast pull, taking almost no time at all, but we WANT the user to see the processing animation for a couple seconds (for psycological affect... its a sort of quiz).

So, here's what I did. Its actually pretty obviouls in hindsight, so I'm surprised I didn't find any one else using this technique. This is actually an except 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 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 )

.c

Have you thought about using setTimeout to kill a non-async XMLHTTPRequest request ?

That's the first thing that comes to mind.

I didn't consider that. I'm not sure that would be the best idea though, since for cross-browser compatibility, you'd have to send the request to your own domain (rather than gibberish), which, even if the URL is intentionally bad (a 404, for example), would still force an extra HTTP cycle on your server. This technique keeps it all local on the client instead.

The requirement was a script stall regardless of how long the request takes to return a response. Techically, the way I implemented it, the response is actually already recieved and cached when the Sleep method is invoked... this to avoid any timeouts and to ensure the response is actually avaialble when naptime is over should it take longer to get for some reason.

Even still, with setTimeout, you'd still have two functions running at the same time, even if one is an sync XMLHTTP request... JavaScript isn't multi-threaded, so I've found its generally best not to force it to do more than one thing at a time, if possible...

.c


.c

I wouldn't describe it that way, since as you say, JavaScript isn't multi-threaded. I'd advocate doing whatever is necessary to make use of a timeout over using a CPU-melting tight polling loop.

That's what happens when I don't read everything in a post.

I'm not sure about the while loop.

What about starting the function with a call to a controll disabling function, then setTimeout to a controll re-enabling function ?

As I said, I only have it run for a few seconds. More than likely, it would crush a browser if you let it for too long (in fact, most browsers these days will actually warn users and give them the option to stop scripts when they appear to have run away, as this would if you set it to go for more than a few seconds).


The problem with setTimeout still is that it IMMEDIATLY returns control to its container, regardless of what the function it just called is doing. So, there isn't any way to stop control in the middle of a function using setTimeout.

Now, I suppose you could do something like this:



That, however, assumes nothing else it going on, and that nothing else might go on, that could collide with the firing doNext in 5000ms, since the control will be where ever showWaitDiv() was called, not where doNext() is... This also interferes with parameter passing, although that's easy to get around by encapulation (which is how I'm doing this anyway).

Either way, your still cycling the processor for X ms... no telling how setTimeout does it internally (probably a thread.sleep embedded in the browser), which is less costly than invoking a while loop. I'll give this a try and see how it works, although I've never had much luck with setTimeouts...
.c

Since the intent is for posterity, based on the comments here, I tried a setTimeout approach. While it more or less worked the same, it sort of ...felt.. better. Anyone who's developed applications knows what I mean

Here's what I did. I snipped out code that was unrelated to this thread, and left out several other methods that were also not related... this is a big class nearly 400 lines (and it's not done yet...). Anyway, there you go:



(Oh yeah, the function names... heh, the class name itself isn't that... but the private function names are... since they are more or less irrelevant, I like getting creative... I use conventional names to reference them as methods though...)

.c

The while loop sure does look alot easier to work with than setTimeout when it's all in one place like that. Beats the hell out of "just trust me" if you know what I mean.

Nice stuff carnix !

Yup... my thoughts exactly. But... sometimes short,sweet code isn't the most efficient. The more I think about it... yes, I had to define two methods to do what I was doing with only one before, using setTimeout in his way uses a native function, and lets the actual browser do the heavy work rather than force-feeding a stall. That is, the waiting isn't being done via JavaScript itself, its being handled somewhere above the script in the browser's memory space, then the next step is called a couple seconds later. Its much less CPU intensive (and, I noticed, the animation ran better... hence the 'feeling' )

Besides, I'm a big proponent of using native software and tools rather than trying to force other tools to work like a native one already does (Apache/mySQL/PHP on Windows, for example.... ASP on Unix.... ColdFusion anywhere other than the trash where it belongs.... ).


So, world, there you go. An actual discussion on Javascript sleep functions that has an alternative to using setTimeout, even if it wasn't the final solution. Enjoy! =]

.c

That last method is superb. Concise and elegant. At last a way to render changes part way through a script, and a proper sleep too.

Thank you.

Too bad it doesn't work in IE7. Face it, there is no sleep function in Javascript.

Why not do the sleep on the server in PHP.

This allows it to be browser independant. If the issue is you want the results to appear non-right-away, then maybe it will work.

Excellent concept, Carnix. I think we can implement it with less code:

I still can't figure out what use a sleep function for JS is.