Web Hosting by Netfirms | Free Domain Names by Netfirms

Using setTimeout/setInterval

The following illustration will keep informing the user that the web site is going to move in two days. They will keep being informed until they click the "do not remind me again" button displayed with the message on a prompt. Run Code | View Code

Process

• Showing the message and getting the answer - prompt
• Showing the message again - If the function is called again by setTimeout the message is shown again.
• Function: showReminder

Events

• The loaded document - onLoad event of the document
• The function is called after every two seconds - The elapsed delay of the seTimeout method.

Input

• The value returned by prompt - true, or false.
• timmerId - Used to clear the time out.
• The message used with prompt - This web site is moving to http://JShoutcut.com in two days! do not remind me again!

Event Trigger

The Solution

Define the body element

Define showCurrentTime

Function analyses

The global timerId variable is declared outside of this function so a reference can be kept alive.

showReminder's purpose is to keep reminding the user that the web site will move in two days time.

This function first declares doNotRemind local variable. This variable is used to hold the answer returned by the prompt method.

Then it uses the prompt method of the window object to get the user's answer to the question used with prompt - This web site is moving to http://JShoutcut.com in two days! do not remind me again!" If the user clicks the confirm button true is returned otherwise false or null is. The value is inserted into doNotRemind.

The doNotRemind variable is checked if it is true

If it is true the timmerId variable is accessed and cleared by setting the clearTimeout method on it. This method forces the script engine to free the memory taken by the timerId and this function is never called again. (Unless the user reloads the document)

If doNotRemind is false it means the user wants to be reminded again so setTimeout is used to call this function again after two seconds. When using setTimeout it returns a pointer and is set into timerId.

Comments with code

Importent

• setTimeout is handy when you need a delay before doing something such as showing an advertisement in a new window or making JavaScript timing game etc. It is also useful whenever you want to do two or more things at the same time. For example moving a picture across the screen and flashing the document.

• Not repetitive

  setTimeout is not repetitive, meaning that it will only call the statement one time unlike setInterval that calls the statement until it is cleared by clearInterval.

• setInterval

  setInterval is just like setTimeout accept it calls the statement repetitively until it is cleared by clearInterval. Be careful when using this setInterval because it makes you code hard to read since it is difficult to know where a function is being called from.

  A solution is to use setTimeout recessively in the function just like in the example above. However there is a time and place to use setInterval for example the Getting the time demonstration uses it to create a digital clock.

• Why clear timeout?

  When setTimeout is used it returns a pointer to the timeout that was set. This pointer should and must be cleared or cancelled, deleted whatever to free the computer resources. When clearing the timeout you use the clearTimeout method of the window object and pass it the timmerId that you want to clear with the following syntax:

  clearTimeout( timer Id Set By The setTimeout Method )

  To clear an interval set by setInterval you use the following syntax:

  clearInterval ( timer Id Set By The setInterval Method )

  As you can see these two methods are brother and sister.

• Parameters

  setTimeout and setInterval both take two parameters

  1. JavaScript statement
  2. The delay before the statement is run

  The JavaScript statement can be any statement in the example above the showReminder function is called. But this could have easily been x=1 or something like that.

  The statement must be surrounded in single or double quotes as in "showReminder()". If it isn't the JavaScript engine will call showReminder() straight away.

  The second argument is the delay. The delay must be a number either a hard coded number like 1000 or a number stored in a variable such as number = 1000. The number should not be surrounded in single or double quotes since it is a number and not a string.

  Here is the syntax for calling he setTimeout method

  setTimeout(javascript_statmnet,delay)

  The parameters for setInterval are the same

  setInterval (javascript_statmnet,delay)

• Delay Parameter

  The delay parameter used in setTimeout and setInterval is in milliseconds. This means 1 represents 1 millisecond and not one normal second. If you want to change a millisecond to a normal second you need to times it by 1000. That's why in this example 2000 is used to make showReminder call it'self every two seconds.

Run Code | View Code

See also: Getting the time | Using prompt

JavaScript Tutorial Home