Learn Modern Unobtrusive JavaScript - Timed Events

Learn Modern Unobtrusive JavaScript

Timed Events

The types of event that your JavaScript will need to handle that are not triggered by your visitors are those events that you trigger yourself from the JavaScript code in the page. There are two ways that you can trigger events from within your own JavaScript code.

1. You can send off a request to the server and have an event triggered when the server responds (this is commonly known as Ajax and we will look at that in more detail in later tutorials)
2. You can use a timer to trigger some processing after a specific amount of time has passed.

It is this second method that we are going to look at in more detail in this tutorial.

There are two functions provided within JavaScript itself for handling timed event triggers. These two functions are setTimeout andsetInterval. Both of these functions take two parameters. The first parameter is a text string containing the JavaScript that is to be run at a future time. The second parameter is a number representing the number of milliseconds from when the function is run that the running of that code is to be delayed.

Both of these functions are asynchronous. This means that your JavaScript code doesn't wait for the future processing to happen before continuing on to run any code following the call. The code in the first parameter will be treated as a totally separate JavaScript execution that will be triggered by an event. The event that will trigger the running of that code is having the timer that was started when the function was run finally reaching the amount of time specified in the second parameter.

The difference between setTimeout and setInterval is that the setTimeout function only triggers the event once and that is the end of it. The setInterval function restarts the timer all over again immediately after triggering the processing and will therefore repeatedly run the specified code at intervals as specified in the second parameter.

One thing that can sometimes happen when we have established code that is to run after a specified amount of time is that we may have further processing take place that determines that we no longer want that future code to run (for example if we set up code to hide some content from our page after a specified time and also provide a way for our visitor to hide it more quickly). What we need to be able to do in that instance is to cancel the setTimeout or setInterval code and the clearTimeout and clearInterval functions are provided for that purpose.

So what can we do with these functions that makes it so useful to introduce them so early in this series of tutorials? Well with our JavaScript all in the head of the page and using getElementById to reference the elements within the page that we want to update, we need to wait until those elements have loaded before we can actually do anything with them. In the earlier tutorials we looked at how to use window.onload to trigger processing when the page finishes loading (so that we know the element has been loaded by then because the whole page has loaded). This is all very well when our page doesn't contain very much but often a web page will contain several images in addition to the text and the window.onload waits for all of them to load too which could take several seconds.

My article Faster DOM Access shows a way of avoiding having to wait for the images to load by using setTimeout to perform a test every 1/10th of a second until the appropriate element within the page has been loaded and running the appropriate code then instead of waiting for the rest of the page to load. Provided that the element being checked is the one furthest down the page that you need to reference in your processing you can be certain that those elements you wish to update are available to be updated even though there may be other parts of the page that haven't loaded yet.