Login

Using Timers in JavaScript

JavaScript’s Window object comes with four methods that you can use to create timed or looping events in your Web pages. In this article, I’ll introduce you to them, and also show you a few examples of how they can be used in different situations.

Some of the most common and beneficial uses of JavaScript involve timer functions. These functions are used to run client-side code at predefined intervals, thereby making it possible to add a new dimension – time – to your Web pages. By using JavaScript’s timing functions, you can run a command after a specified delay has passed, loop events to run over and over again at predefined times, and synchronize multiple events on a timeline. JavaScript’s Window object comes with four methods that you can use to create timed or looping events in your Web pages. In this article, I’ll introduce you to them, and also show you a few examples of how they can be used in different situations.

Over the course of this article, I’ll be exploring the various timing functions available in JavaScript, together with examples of how they can be used to create timed events in an HTML document. I’ll introduce you to the setTimeout(), clearTimeout(), setInterval() and clearInterval() functions, and also show you how to use them to create a variety of different client-side applications, including a tickertape, a timed slideshow, and a countdown clock. So come on in! If you’re new to JavaScript, you’re going to find this article to be quite an eye-opener!

{mospagebreak title=Window Washer}

Let’s start at the top, with the setTimeout() and clearTimeout() methods. These methods belong to the Window object, and are commonly used to run a particular piece of code after a pre-defined interval has passed. Consider the following example:[code]<script language=”JavaScript”>var t = window.setTimeout(‘alert(“5 seconds have passed since you loadedthis page”)’, 5000);</script>[/code]In this case, the setTimeout() method is used to run the function 5000 milliseconds (5 seconds). Thus, there are always two arguments to the setTimeout() method; the first is the code to run, and the second is the amount of time to wait before running it.

Here’s another, more useful example.

[code]<script language=”JavaScript”>var t = setTimeout(‘window.close()’, 30000);</script>[/code]In this one, the window (which we’ll assume has been popped open from some other parent window) closes automatically 30 seconds after it opens.

Just as you can set a timeout, you can also clear it with the clearTimeout() method. This method is used to remove a timeout previously declared with setTimeout(). Since there may be multiple calls to setTimeout() in the same document, it is mandatory to provide clearTimeout() with a reference so that it knows which timeout to clear. The following variant of the example above demonstrates:

In this case too, the window will never close, because the first timeout will be cancelled 10 seconds in by the call to clearTimeout() in the second.

{mospagebreak title=New Year Blues}

Here’s another example, this one containing two timers. The first one is set to close the window after 30 seconds. However, 10 seconds in, the second one will activate and ask the user to confirm the timeout. If the user does not confirm it, the timeout will be cancelled.

In this case, I’m using the setTimeout() method to call itself in a loop every second, and updating the value of the countdown clock on every iteration of the loop. When the countdown hits 0, an alert box is displayed.

{mospagebreak title=A Decent Interval}

Next up, the setInterval() and clearInterval() methods. The main difference between these methods and the ones on the previous page is this: the setTimeout() and clearTimeout() methods are used to run a particular piece of code once after a pre-defined interval has passed, while the setInterval() and clearInterval() methods are used to run a piece of code over and over again, with a pre-defined interval between successive runs.

In this case, the alert() box will keep appearing, once every 2 seconds. Thus, there are always two arguments to the setInterval() method – the first is the code to run, and the second is the amount of time between successive runs.

In this case, I’ve created the appearance of a moving tickertape by taking one character off the beginning of the message string and adding it to the end. Each time the tickerTape() function is called, the first character of the string is deleted and added to the end of the string, simulating a scrolling ticker-tape. The setInterval() function takes care of calling the tickerTape() function over and over again, once every 150 milliseconds. Finally, the “status” property is used to assign the result at each stage to the browser’s status bar.

Just as you can set an interval, you can also clear it with the clearInterval() method. Here too, you must provide clearInterval() with a reference so that it knows which interval to clear. The following variant of the example above demonstrates:

In this case, when you click the button, the clearInterval() method will cancel the timer set earlier with setInterval() and the tickertape will stop moving.

{mospagebreak title=Turning Up the Volume}

Using a setInterval() function is identical to using a setTimeout() function in a loop. To illustrate this, consider the following example by rewriting the countdown clock example from a few pages back.

In this case, I’ve used the setInterval() method instead of the setTimeout() method to call the countDown() function over and over again. Note the difference between the version above and the one a few pages back – above, the call to setInterval() is outside the loop, whereas earlier, the call to setTimeout() was inside the loop.

Here’s one more example, this one making a <div> appear when the mouse moves over a link and automatically hiding it again after 3 seconds:

Here, the images to be displayed are stored in a JavaScript array, and a “for” loop takes care of pulling out the correct image from the array and loading it into the page. The setInterval() method is used to refresh the image with a new one every 5 seconds.

You can also use the setInterval() method to move things around on a Web page, by incrementing an X- or Y-coordinate of a page element at a predefined interval. Consider the following example, which demonstrates by moving a <div> containing an image of a car across the screen.

Finally, I’ll wrap things up with a more practical example, one which might come in handy in your Web development. In this next example, the task is to offer the user a file upload box, which he or she can use to upload files to a Web site. Once the user selects a file for upload and initiates the transfer, a dialog box should pop up with a message asking the user to be patient. Once the file upload completes, the dialog box (window) should automatically disappear.

Now, there are a number of ways to implement this. Here’s how I’m going to do it:

1. Write the code to display a form for file upload, as well as the code to accept the file and transfer it to a data directory on the server. This will be implemented in PHP.

2. Add code to the script above to throw up a pop-up window once the upload begins.

3. Add code to the pop-up window to keep polling the parent window for file upload status. Once the upload has finished (signified by the parent browser window loading a new URL), the pop-up window will automatically close.

Now, the server-side PHP script which processes the file submitted by the user through the form above:[code]<?php

// upload.php

// upload the file to the serverif($_FILES[‘file’][name] != “”) { if (is_uploaded_file($_FILES[‘file’][‘tmp_name’])) { // if the file is clean, move it to final location if(file_exists($_FILES[‘file’][‘tmp_name’])) {

// check the size of the file if($_FILES[‘file’][‘size’] < $file_limit) { // get the file name $NAME = $_FILES[‘file’][‘name’];

Once the upload is complete, the script above will redirect the browser to a success page (or an error page, if an error occurred).

Notice in the form that I’m opening a new window when the user clicks the submit button. This new window will show the “be patient” message, and must also keep checking the parent window at pre-defined intervals to see if the transfer is complete. Here’s the code:

<center><h1>Please wait, your upload is being processed!<br>This window will close automatically once the upload is complete.</h1></center>

</body></html>[/code]

This script uses the setInterval() method to check the URL of the parent window every second and, when it detects that the parent has gone to the success or error page (indicating that the upload has completed), it automatically terminates itself with the self.close() method.

And that’s about all I have time for. Over the course of this article, I introduced you to JavaScript’s four timing functions, showing you how to use the setTimeout() and setInterval() methods to call a function once after a pre-defined delay, or repeatedly at a pre-defined interval. That was the easy part, and I followed it up with a bunch of examples designed to showcase some of the things you can do with this power. Among the example applications I built: a browser tickertape, a countdown clock, a timed slideshow, a variable-speed page object, and a polling status window.

I hope you had fun reading this article, and that the examples sparked off some ideas of where you can use these functions in your own scripts. ‘Till next time, see ya!

Note: Examples are illustrative only, and are not meant for a production environment. Melonfire provides no warranties or support for the source code described in this article.