Tutorials Tonight
Follow Us


Timers in javascript provide a functionality to delay the function call for a certain time or to call a function continuously after a regular interval of time.

There are 2 different types of timer function in javascript:

Let's look at some scenarios and see what javascript functionality to use to invoke functions in the given scenarios.

Scenario What to use
To invoke function for 'n' number of times Use javascript loop, loop for 'n' number of times and invoke function in each iteration
To invoke a function on some event Use 'addEventListener' method and bind the function with desired event
Invoke a function after some time Use setTimeout() method
Invoke a function regularly at a certain interval of time Use setInterval() method

The setInterval Method

The setInterval() method executes a function repeatedly after a fixed interval of time.

The setInterval() method is a method of window interface, hence it is a global method.

setInterval(function, milliseconds);

The setInterval() method contains 2 parameters:

In the following example the setInterval function repeatedly prints counting after 1 second.

var count = 1;
var element = document.getElementById("output");
function counting(){
  element.innerHTML += count + "
"; count++; } setInterval(counting, 1000); //Calling function after 1 sec
▶ Run the code

How To Stop setInterval() From Calling A Function?

If you don't stop the setInterval method from calling the function then it will keep execution the function till infinity. So we need to stop the interval.

To stop the setInterval() method use clearInterval() method and pass the instance of setInterval() function (When called setInterval() method it returns an instance which can be stored in a variable).

var intervalInstance = setInterval();

The following example contains a button which onclick clears interval of counter function.

<button onclick="clearIt()">Clear Interval</button>

  function clearIt(){
    clearInterval(interval); //clearing interval
  var interval = setInterval(counting, 1000);
  var count = 1;
  var element = document.getElementById("output");
  function counting(){
    element.innerHTML += count + "<br>";
▶ Run the code

The setTimeout Method

The setTimeout() method executes a function after a specified time interval.

The setTimeout() method receives two parameter :

The following example shows the current time after 3 seconds.

setTimeout(printTime, 3000);
var element = document.getElementById("output");
function printTime(){
  element.innerHTML = new Date();
▶ Run the code

How To Stop setTimeout() From Calling A Function?

The clearTimeout() method stops the function execution in setTimeout().

The clearTimeout() method is a window method, so can be used with or without referring to the window

var timeoutReference = setTimeout();

The setTimeout() method returns a reference which is passed in the clearTimeout() as an argument to clear timeout.

The following method prints time after three second, stopping it from printing by clearing setTimeout().

var ref;
var element = document.getElementById("output");
function printTime() {
  ref = setTimeout(showTime, 3000);
function stopIt() {
function showTime() {
  element.innerHTML = new Date();
▶ Run the code