It's Sean!

UK freelance journalist, author
and writer Sean McManus

Printed from www.sean.co.uk. © Sean McManus.
Home > Articles > Webmaster resources > Javascript examples > Javascript delay

Javascript delay / wait / pause script

Some background on this Javascript code

My first programming language was Basic. There is a command to jump from one line of the program to another, called GOTO. I've heard it said that this command is never needed (in Basic) if you're writing structured programs and programming properly. Certainly, I can't think of a good exception.

I mention this because I wonder whether this Javascript delay script is a similar dark force that shouldn't ever be needed if you're programming well. I'll share it with you anyway and let you worry about the beauty of your code.

Setting events to occur after a delay

This is the right way to make something happen after a delay in Javascript, using setTimeout() to trigger an alert after 1250 milliseconds.

setTimeout(function() {alert('hello');},1250);

Want to see it in action? No problem.

And here's the code that pulls that stunt:

<form>
<input type="button" value="Push this button to open an alert box in 1250 milliseconds" onClick="setTimeout(function() {alert('hello');},1250);">
</form>

That's the elegant way to handle delays, pauses and waiting in Javascript. Your teacher would be proud of you.

Setting a Javascript program to wait

The routine above doesn't stop the Javascript routine from executing. It just sets up an event to happen later.

But sometimes you find yourself thinking: It would be so much easier if I could just get Javascript to wait for a bit here and then carry on as before.

It's a bit naughty, but I've written a script that does just that.

Note: This script is not a good example of how to use Javascript. It consumes a huge amount of CPU power just going round in circles for a predetermined amount of time. You really should be using the technique above in nearly all cases, but this script can be handy for prototyping.

<script language="javascript">

// www.sean.co.uk

function pausecomp(millis)
{
var date = new Date();
var curDate = null;

do { curDate = new Date(); }
while(curDate-date < millis);
}

</script>

Call the routine pausecomp(x) where x is the number of milliseconds you would like the computer to pause.

Many thanks to Michael Andrews who adapted my original code for seconds to make it work for milliseconds and Artur Kraft who sent me this code, which is more elegant than my original solution was. Thanks also to André Pirard for untwisting the variable declarations.

You're welcome to use this script on your site and to adapt it to suit.

Update

Pavel Bakhilau has contacted me with a more concise version of the script:

<script language="javascript">

function pausecomp(ms) {
ms += new Date().getTime();
while (new Date() < ms){}
}

</script>

Get my website design book!

Book cover: Web Design in Easy Steps For more Javascript examples, and an introduction to HTML and CSS too, see my new book Web Design in Easy Steps. It takes you through the whole process of building a website, from planning and content creation, through designing your layout and navigation, building your site, publishing it and promoting it.

It includes walkthroughs on Flash and Dreamweaver, and chapters dedicated to adding a shopping cart, integrating with social networks, and content management systems (primarily Wordpress). It concludes with a look at SEO and understanding what your visitors do on your website (web analytics).

The book includes extensive full colour examples and is written in the easy-to-follow style that the author has used in his contributions to magazines including Internet Magazine, Internet Works, and Business 2.0.

Find out more about the Web Design in Easy Steps book here.

You can order it from Amazon here.

Books by Sean McManus

Scratch Programming in Easy Steps

Scratch Programming in Easy Steps

Raspberry Pi For Dummies

Raspberry Pi For Dummies

Learn to program with the Scratch programming language, widely used in schools and colleges.

Set up your Pi, master Linux, learn Scratch and Python, and create your own electronics projects.

iPad for the Older and Wiser

iPad for the Older and Wiser

Web Design in Easy Steps

Web Design in Easy Steps

Get the most from your iPad. Written in a friendly and accessible tone, this bestselling book is packed with handy tricks and tips.

Learn the layout, design and navigation techniques that make a great website. Then build your own using HTML, CSS, and JavaScript.

More books

Recommended articles

Sean wearing Google Glass

Read my review and see my photos of Google Glass

Google Glass is a wearable computer that uses a mixture of voice recognition and gestures for control. See my photos from the UK launch showcase and read my review of Google Glass. You can also read my tips for developing Google Glass applications.

Scratch cat and rainbow circle

10-block demos for Scratch programming

Lots of people of all ages are learning to program with Scratch. Discover some useful tricks and techniques in my 10-block Scratch demos, including special effects you can drop into your games.

Paper Raspberry Pi case

Download free book chapters and more!

Download a free case for your Raspberry Pi, and free chapters from my books about the Raspberry Pi, Scratch, web design and more!

©Sean McManus. www.sean.co.uk.