Understanding “setTimeout()” and “setInterval()” timer methods in jQuery/JavaScript

Last Updated: December 21, 2017

The 2 timer methods of JavaScript that are widely used in jQuery are setTimeout() and setInterval().

These 2 methods allow execution of code at specified time intervals.

Let us understand these 2 timer methods with codes.

setTimeout()

This timer method allows to run a function once after an interval of time.

Syntax:

setTimeout(function, milliseconds, paramerter1, parameter2, ...)

Parameter	Description
Function	Required. The function that will be executed
Milliseconds	Optional. The number of milliseconds to wait before executing the code. If omitted, the value 0 is used
paramerter1, paramerter2, …	Optional. Additional parameters to pass to the function

Example: Showing alert box after 2 seconds

setTimeout(function(){ alert("Hi"); }, 2000);

You can also separate the function call from the syntax.

setTimeout(showAlert, 2000);
function showAlert() {
    alert('Hi');
}

Passing parameters to the ‘showAlert()’ method

setTimeout(showAlert, 2000, "Hi", " programmer!");
function showAlert(parameter1, parameter2) {
    alert(parameter1 + parameter2);
}

The alert box will show – Hi programmer!.

Use clearTimeout() to prevent setTimeout() to run

The below code will not show the alert box as there is clearTimeout() on the last line.

function showAlert(msg) {
    alert('hi');
}
var timer=setTimeout(showAlert, 5000);
clearTimeout(timer);

setInterval()

This timer method calls a function or evaluates an expression at specified intervals. For example if we give the time as 4 seconds then the given function or expression will be called/evaluated in every 4 seconds.

Syntax:

setInterval(function, milliseconds, parameter1, parameter2, ...)

Parameter	Description
Function	Required. The function that will be executed
Milliseconds	Required. The intervals (in milliseconds) on how often to execute the code
paramerter1, paramerter2, …	Optional. Additional parameters to pass to the function

Example: Showing alert box every 2 seconds

setInterval(function(){ alert("Hi"); }, 2000);

Separate the function call from the syntax.

setInterval(showAlert, 2000);
function showAlert() {
    alert('Hi');
}

Passing parameters to the ‘showAlert()’ method

setInterval(showAlert, 2000, "Hi", " programmer!");
function showAlert(parameter1, parameter2) {
    alert(parameter1 + parameter2);
}

The alert box will show – Hi programmer! in every 2 seconds time.

Use clearTimeout() to stop setInterval() method.

The below code will not show the alert box as we have the clearTimeout() on the last line.

function showAlert(msg) {
    alert('hi');
}
var timer=setInterval(showAlert, 5000);
clearTimeout(timer);

DEMO DOWNLOAD

Conclusion
The setTimeout & setInterval are very useful JavaScript function. We can also use them in our jQuery code and create amazing features like time clock, stop watch, image sliders and more.

Check article – 4 jQuery Timer examples which all developers should know.
In this article I have built image sliders, time clock, stop watch & background color changer using ‘setTimout()’ & ‘setInterval()’.