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:

• function/code - The function/code to be executed
• interval - The time, in milliseconds (thousandths of a second), the timer should delay in between executions of the specified function or code.

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

var count = 1;

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

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.

<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>

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:

• function/code - function or code you want to execute after a certain time.
• interval - It is given time in milliseconds after which the function or code will be executed.

The following example shows the current time after 3 seconds.

setTimeout(printTime, 3000);

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

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

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

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.