Javascript Timer Function


Timer functions in javascript provide the 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 functions in javascript:

  1. setInterval()
  2. setTimeout()

1. setInterval Function

The setInterval() method sets a time interval that calls a function or evaluates an expression at specified intervals (in milliseconds).

The setInterval() method is global and can be used in any window.

setInterval(function, interval)
// or
setInterval(code, interval)

The method contains 2 parameters:

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

Example

var count = 1;

function counting() {
  console.log(count);
  count++;
}
// Calling function after 1 sec
setInterval(counting, 1000);
Try it

How To Stop setInterval() From Calling A Function?

If you don't stop the setInterval method from calling the function then it will keep executing 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();
clearInterval(intervalInstance);

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

Example

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

<script>
  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>";
    count++;
  }
</script>
Try it

2. setTimeout Function

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.

Unlike setInterval() method, setTimeout() method is called only once.

setTimeout(function, interval)
// or
setTimeout(code, interval)

The method contains 2 parameters:

The following example shows the current time after 3 seconds.

Example

setTimeout(printTime, 3000);

function printTime() {
  console.log(new Date());
}
Try it

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

clearTimeout(timeoutReference);
var timeoutReference = setTimeout();

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

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

Example

var ref;
var element = document.getElementById("output");
function printTime() {
  ref = setTimeout(showTime, 3000);
}
function stopIt() {
  clearTimeout(ref);
}
function showTime() {
  element.innerHTML = new Date();
}
Try it

When To Use setInterval() And setTimeout()?

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 the function for 'n' number of times Use javascript loop, loop for 'n' number of times, and invoke a function in each iteration
To invoke a function on some event Use 'addEventListener' method and bind the function with the desired event
Invoke a function after some time Use setTimeout() method
Invoke a function regularly at a certain interval of time Use setInterval() method