JS Timers

In this tutorial you will learn about timer functions in JavaScript.

Working with Timers

A JavaScript timer is a function that allows the execution of a function at a particular time.

The execution of code can be delayed using timers in that no action is performed at the exact moment an event is triggered or the page is loaded. For instance, timers can be used to display a real-time clock, or, change the advertisement banners on the website at regular intervals, and so on. Timer consists of two functions in JavaScript and they are: setTimeout() and setInterval().

In the following section, you will be shown how to create timers to delay code execution including how to perform one or more actions repeatedly using these functions in JavaScript.

Executing Code After a Delay

The setTimeout() function is used just once after a certain time to execute a specified piece of code or a function. 

Syntax:

setTimeout(function, milliseconds)

This function accepts two parameters and they are:

• A function: This is the function to execute.
• Optional delay parameter: This is the number of milliseconds representing the amount of time to wait before the function is executed [1 second = 1000 milliseconds]. 

Let's see how it works:

<script>
function myFunction() {
    alert('Hello World!');
}
</script>
 
<button onclick="setTimeout(myFunction, 2000)">Click Me</button>

Try with example

The example above displays an alert message after 2 seconds of clicking on the button.

Note: However, a value of 0 is used if the delay parameter is omitted or not specified meaning the specified function is executed immediately, or, as soon as possible.

Executing Code at Regular Intervals

Similarly, the setInterval() function executes a function or specified piece of code repeatedly at fixed time intervals.

Syntax:

setInterval (function, milliseconds)

This function also consists of two parameters and they are:

• Function: It is the function to execute.
• Interval: This is the number of milliseconds representing the amount of time to wait before executing the function (1 second = 1000 milliseconds).

Here's an example:

<script>
function showTime() {
    var d = new Date();
    document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
setInterval(showTime, 1000);
</script>
 
<p>The current time on your computer is: <span id="clock"></span></p>

Try with example

After one (1) second, the above example will execute the showTime() function repeatedly. Through this function, the current time on the computer is retrieved and displayed in the browser.

Stopping Code Execution or Cancelling a Timer

Both setTimeout() and setInterval() methods return a unique ID (a positive integer value, called timer identifier) which identifies the timer created by these methods.

This ID can be used to disable or clear the timer and stop the execution of code beforehand. Clearing a timer can be done using two functions: clearTimeout() and clearInterval().

The setTimeout() function takes a single parameter which is an ID, and it clears a setTimeout() timer associated with that ID, as demonstrated in the following example:

<script>
var timeoutID;
 
function delayedAlert() {
  timeoutID = setTimeout(showAlert, 2000);
}
 
function showAlert() {
  alert('This is a JavaScript alert box.');
}
 
function clearAlert() {
  clearTimeout(timeoutID);
}
</script>
 
<button onclick="delayedAlert();">Show Alert After Two Seconds</button>
 
<button onclick="clearAlert();">Cancel Alert Before It Display</button>

Try with example

Similarly, the clearInterval() method is used to clear or disable a setInterval() timer on click</button>

<script>
var intervalID;
 
function showTime() {
    var d = new Date();
    document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
 
function stopClock() {
    clearInterval(intervalID);
}
 
var intervalID = setInterval(showTime, 1000);
</script>
 
<p>The current time on your computer is: <span id="clock"></span></p>
 
<button onclick="stopClock();">Stop Clock</button>

Try with example

Note: Technically, clearTimeout() and clearInterval() can be interchangeably used. More so, you should stop using both methods interchangeably for clarity and code maintainability.