Javascript setTimeout() Function with Examples - Coding Sharp

Javascript setTimeout() Function with Examples

setTimeout() Function

setTimeout() is a native JavaScript function. Which is allow us to call a specific JavaScript function or piece of code at specified interval or delay (on milliseconds). It might be useful when you want to display a message or a popup after user has browse the webpage for a certain amount of time.

Simple example for setTimeout

$('#btnOk').on('click', function(){
setTimeout(openPopup, 2000);

function openPopup()
alert('You press ok button');

in above example, it will display an alert message after 2 seconds once you press ok button.

Let’s have a look at the syntax for setTimeout function

var timerId = window.setTimeout(FunctionName, [timeInterval, parameter1, parameter2, ...]);
var timerId = window.setTimeout(jscode, [timeInterval]);

timerId is a numerical id return by setTimeout function, so later we can use it to call clearTimeout function to cancel the timer.

FunctionName – is the name of the JavaScript function to be executed after given interval.
jscode – in place of js function you can give direct the JS code to be executed
timeInterval – is the number of milliseconds by which the function should be delayed to call. If you are not passing the time interval then default it will be zero.

Difference between setTimeout vs window.setTimeout

If you see the above code carefully then you will have noticed that I have used window.setTimeout and title of this article is setTimeout, why is that?
let me give you the difference between both of them.

Well above both functions setTimeout and window.setTimeout are essentially same, There is a major difference like in window.setTimeout function we are referencing as a property of global window object. So sometimes if we have defined an another setTimout method in the same scope then it will be a issue. However what ever syntax you choose it’s up to the developer.

You can use setTimeout function in a following manner

using the function name

function LetsCall(){
alert('I am called.');
setTimeout(LetsCall, 2000);

using a variable which refers to the function

var LetsCall = function(){
alert('I am called.');
setTimeout(LetsCall, 2000);

using an anonymous function

alert('I am called.');
}, 2000);

using a direct JScode as a string

setTimeout('alert(\'I am called.\');', 2000);

Now lets move to the cancelling a Timer
The return value of setTimeout is a numerical id which can be used to cancel the timer using clearTimeout() function.

var timerId = setTimeout(jscode, 2000);