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

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

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

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()’.

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.