//PROCESS: Timeout and intervals

<New code>

//PROCESS: setTimeout( functionName, numberOfMilliseconds);
— triggers functionName after numberOfMilliseconds has elapsed
//PROCESS: setInterval( functionName, numberOfMilliseconds);
— triggers functionName repeatedly every numberOfMilliseconds

The short version

setTimeout( 
	function ( parameter ) {
		delayedFunction( parameter )		
	}, numberOfMilliseconds 
);

Delaying actions with setTimeout()

There are plenty of times that you would like your program to wait before continuing.

For example:

...is created with a button having document.querySelector( "#buttonId" ).onclick = delayedMessage; and the following javascript: 

//PROCESS: delay for 2 seconds
var delayedMessage = function () {
	setTimeout( displayNewButton, 2000 );
}

//OUTPUT: change the button text
var displayNewButton = function () {
	document.querySelector( '#buttonId').innerHTML = "Look! I'm a totally different button!"             
}

Two things to note

  1. The function name called in setTimeout() is a function reference. Function references use just the function name without the brackets (). Function references are basically variables that contain an entire function definition. At this point all you need to know is that you should not include the brackets.
  2. The delay time is measured in milliseconds. So if you want a delay of 3 seconds, you would use: setTimeout( someFunctionToTrigger, 3000 );

Repeating actions with setInterval()

At other times you will want to repeat the same code every given amount of time.

For example, this button has document.querySelector("buttonId").onclick = countUp; :

And it is created with the following code:

//INIT: set the counting variable to zero before the program starts
var count = 0;

//OUTPUT: display the current count inside the button label
var displayCount = function () {
    document.querySelector( '#button2Id' ).innerHTML = count;
}

//PROCESS: add one and trigger display function
var addOneAndDisplay = function () {
    count = count + 1;
    displayCount();
}

//PROCESS: repeat every second
var countUp = function () {
    setInterval( addOneAndDisplay, 1000 );
}

Stopping a countdown using clearTimeout()

setInterval() goes forever. You often want to stop setInterval() after a while.

You can do this by assigning the timer (either setTimeout() or setInterval()) to a variable so that you can use clearTimeout().

Here is an example of a button that triggers startCountdown() and will stop setInterval() after it counts down from 10: 

//INIT: 
var timer;          //declare an empty variable to hold the timer
var count2 = 10;    //start the countdown from 10

//OUTPUT: display the message inside the button label
var displayMessage = function ( message ) {
    document.querySelector(  '#button3Id'  ).innerHTML = message;
}

//PROCESS: subtract from countdown until zero
var countDown = function () {
    count2 = count2 - 1;
	
    if ( count2 == 0 ) {            // if the countdown is finished
        clearTimeout( timer );      // stop the setInterval timer
        displayMessage( 'Boom!' );  
    } else {                        // otherwise display the countdown
        displayMessage( count2 + ' seconds left...' );
    }
}

//PROCESS: assign timer to an interval that triggers countDown() every 1 second
var startCountdown = function () {
    timer = setInterval( countDown, 1000 );
}

Another way of writing setTimeout() and setInterval

The strangest thing about setInterval() and setTimeout() is that they don't trigger a function directly. They use a function reference, without the brackets, instead. This has two odd side effects:a side effect of not allowing you to pass parameters into the function you are triggering.

  1. Function references do not allow you to call a function with parameters - and sometimes you need that
  2. This style of coding forces you to create a new function just to be triggered by setTimeout() and setInterval()

There is a way around it, however. Javascript allows you to define an anonymous function inside things like setTimeout() and setInterval().

Some people like this method better because it is cleaner and requires fewer functions. Others find anonymous functions strange and don't like it. Professional javascript coders tend to use the anonymous function method, but you should use whichever method you like the most.

Here is the countdown example from above, converted to using an anonymous function: 

//INIT: start the countdown from 10
var count2 = 0;

//OUTPUT: display the message inside the button label
var displayMessage = function ( message ) {
    document.querySelector(  '#button3Id'  ).innerHTML = message;
}

//PROCESS: assign timer to an interval that triggers countDown() every 1 second
var startCountdown = function () {
    var timer = setInterval( function () {  // declare timer to hold an interval with an anonymous function
        count2 = count2 - 1;                // reduce the count
        
        if ( count2 == 0 ) {                // if the countdown is finished
            clearTimeout( timer );          // stop the setInterval timer
            displayMessage( 'Boom!' );  
        } else {                            // otherwise display the countdown
            displayMessage( count2 + ' seconds left...' );
        }
    }, 1000 );                              // trigger the interval every 1 second
}

Learn more