How To Properly Implement JavaScript Delay Code

Using setTimeout

One of the simplest ways to implement a delay in JavaScript is to use the “setTimeout” function. Actually it is the only way I would recommend as other ways may give unexpected result which I mention later in this tutorial. The catch here is that you cannot just use setTimeout on its own as you will see why later on.

The full syntax of the setTimeout function is as follows:

setTimeout(“functionToCall()”, 1000);

The parameters of this function are the function you plan to call and the delay in which the function should be called in milliseconds. It very important to note that the first parameter must be enclosed in quotes. If not the function is not going to work.

This code below is an example that shows an alert after waiting for five seconds

This is okay as long there is only one function but when you have several function working, the delay will still be there but the next function will continue to be processed without a noticeable pause.

For example in this code:

function hello(){//do some stuffsetTimeout(’nextStep()’,5000);// do more stuff}

Anything placed after the setTimeout function will be called even before the function “nextStep()” returns or is even called.

To simulate the sleep condition properly, with your JavaScript delay code, you can avoid this situation by running the code you intended to run after the delay from within the nextStep() function.

Here is an example to illustrate that.

function hello(){//do some stuffalert(“Hello, anybody there?”);setTimeout(’nextStep()’,5000);}function nextStep() {alert(“Hello, I have been delayed Five seconds”);}

Why All the Lengthy Code And Workarounds?

The very nature of JavaScript comes in the way of preventing a single function from bogging down the smooth operations of the web browser. So you find that once a function has been called it runs in a separate thread and the JavaScript engine in the web browser moves on to the next function in the execution line. That is why when setTimeout is called anything after it immediately executes.

With this in mind we therefore see JavaScript as having no sleep() function like there is in other programming languages. You also need to be careful when simulating sleep conditions in JavaScript using your custom code as badly designed simulations can involve a wait that is actually too busy doing nothing and anything busy would consume valuable CPU Cycles and end up locking the web browsers.

What If I want To Do Something As I wait?

Supposing you put a certain task on hold for say 10 seconds. In the meantime you would like to do something else in JavaScript Code. The answer is simple. Using the code above and changing the timeout to 10 seconds instead of five I am able to do additional tasks as I wait for the simulated pause to finish by taking advantage of JavaScripts tendency to run the next function after setTimeout immediately.

Here is the example code.

function hello(){//do some stuffalert(“Hello, anybody there?”);setTimeout(’nextStep()’,10000);alert(“do more stuff as we wait for code within nextStep to finish sleeping”);}function nextStep() {alert(“Hello, I have been delayed Ten seconds”);}

You can test all this JavaScript delay code by copying the samples in a text editor or your favorite HTML authoring tool. Open the file in a web browser and see how the delay code simulates a sleep condition.

You can find other JavaScript tips such as this sample code for JavaScript drop down menus and his tutorial on creating a drop down list of the 50 states using JavaScript.