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 function of JavaScript. We can also use them in our jQuery code and create amazing features like time clock, stop watch, image sliders and more.

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.