JavaScript timer

April 24, 2023

JavaScript creates a timer to execute a task or function at a specified time. A timer is primarily used to delay the execution of a program or to execute JavaScript code at regular intervals. By using a timer, we can delay the execution of the code. Consequently, the code does not complete its execution simultaneously with the triggering of an event or the loading of a page.

A good example of a timer is the advertisement banners on websites, which change every 2-3 seconds. Advertisement banners are changed frequently on websites such as Amazon. We set a time interval for changing them. The purpose of this chapter is to demonstrate how to create a timer.

SetInterval() and setTimeout() are two JavaScript timer functions that can be used to delay the execution of code and to perform one or more operations repeatedly. Both the timer functions and their examples will be discussed in detail.

Examples

Here are some examples of JavaScript timers using these functions.

setTimeout()

The setTimeout() function allows users to delay the execution of code. The setTimeout() method accepts two parameters, one of which is a user-defined function, and the second is the duration of the delay. The time parameter holds the time in milliseconds (1 second equals 1000 milliseconds).

The basic syntax of setTimeout() is:

setTimeout(function, milliseconds)

We will delay the printing of the message for three seconds by using the setTimeout() function. After 3 seconds of code execution, the message will appear on the web rather than immediately. Here is the code that demonstrates how it works:

<html>
<body>
<script>
function delayFunction() {
document.write('<h3> Welcome to i2Tutorials <h3>');
}
</script>
<h4> Example of delay the execution of function <h4>
<button onclick = "setTimeout(delayFunction, 3000)"> Click Here </button>
</body>
</html>

OUTPUT :

setInterval()

The setInterval method is similar to the setTimeout() method. The specified function is repeatedly executed after a specified period of time. Or, we can simply say that a function is executed repeatedly after a specified period of time provided by the user. Display the updated time every five seconds, for example.

The basic syntax of setInterval() is:

setInterval(function, milliseconds)

It accepts two parameters, one of which is a user-defined function, and the other is a time-interval parameter to wait before executing the function. It is optional to pass the time-interval parameter, which represents the amount of time in milliseconds (1 second equals 1000 milliseconds). Here is how this function is implemented in the code below:

Example:

<html>
<body>
<script>
function showOutput() {
var systemdate = new Date();
document.getElementById("timer").innerHTML = systemdate.toLocaleTimeString();
}
setInterval(showOutput, 4000);
</script>
<h3> Show in every 4 seconds </h3>
<h3> The current time on your computer is: <br>
<span id="timer"></span> </h3>
</body>
</html>