Everything About Timers in JavaScript – Function, Event & how to implement them

A timer is established in JavaScript to perform a task or any function at a specific time. The timer is mostly used to postpone the program’s execution or to run JavaScript code at regular intervals. We can use a timer to delay the execution of the function. As a result, when an event occurs or a page loads, the code does not complete its execution at the same time.

Advertisement banners on websites, which change every 2-3 seconds, are the best illustration of a timer. On websites like Amazon, these advertising banners are altered on a regular basis. To alter them, we set a time interval. We’ll show you how to make a timer in this chapter.

SetInterval() and setTimeout() are two timer functions in JavaScript that enable postpone code execution and allow one or more processes to be repeated. We’ll go over both the timer functions and their examples in depth.

setTimeout()

The setTimeout() function allows users to postpone code execution. The setTimeout() method takes two parameters, one of which is a user-defined function and the other of which is the amount of time to postpone the execution. The time argument, which is optional to pass, holds the time in milliseconds (1 second = 1000 milliseconds).

The basic syntax of setTimeout() is:

setTimeout(function, milliseconds)

The setTimeout() function will be used to delay the printing of the message for 3 seconds. Instead of appearing immediately after the code is executed, the message will appear on the web after 3 seconds. Let’s take a peek at the code to see how it works:

<html> 
<body> 
<script> 
function delayFunction() { //display the message on web after 3 seconds on calling delayFunction 
document.write('<h3> Welcome to Codedamn<h3>'); 
} 
</script> 
<h4> Example of delay the execution of function <h4> 
<!?button for calling of user-defined delayFunction having 3 seconds of delay --> 
<button onclick = "setTimeout(delayFunction, 3000)"> Click Here </button> 
</body> 
</html>

The code above will run in two stages. The HTML portion of the code will run first, followed by the remaining JavaScript code, which will run after 3 seconds if you click the Click Here button. See the results in the table below. After 3 seconds, the remaining code will be executed when you click the Click Here button. After 3 seconds, a message saying “Welcome to Codedamn” will appear on the web (3000 milliseconds).

setInterval()

The setInterval method is similar to the setTimeout() function in that it sets a timer interval. It repeats the supplied function after a defined time interval. Or, to put it another way, a function is repeated after a certain period of time has been specified by the user in this function. For instance, show the current time every five seconds.

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, similar to the setTimeout() method. The optional time-interval argument stores the length of time in milliseconds (1 second = 1000 milliseconds). Now, have a look at the code below to see how this method works:

<html> 
<body> 
<script> 
function waitAndshow() { //define a date and time variable 
var systemdate = new Date(); //display the updated time after every 4 seconds 
document.getElementById("clock").innerHTML = systemdate.toLocaleTimeString(); 
} //define time interval and call user-defined waitAndshow function 
setInterval(waitAndshow, 4000); 
</script> 
<h3> Updated time will show in every 4 seconds </h3> 
<h3> The current time on your computer is: <br> 
<span id="clock"></span> </h3> 
</body> 
</html>

When the preceding code is run, the result is a plain HTML statement with no time string, as shown below. The JavaScript method will be called after 4 seconds and the time will be displayed. This will show the time on your system every four seconds. Another use of setInterval() techniques is to display a message string every 4 seconds indefinitely.

<html> 
<body> 
<script> 
function waitAndshow() { 
//display the message on web on calling delayFunction 
document.write('<h3> Welcome to Codedamn<h3>'); 
} 
</script> 
<h3> A string will show in every 4 seconds </h3> 
<!-- call user-defined delayFunction after 4 seconds --> 
<button onclick = "setInterval(waitAndshow, 4000)"> Click Here </button> 
</body> 
</html>

Stop or cancel the timer

To cancel or stop the timer and halt the execution of code, JavaScript provides two functions: clearTimeout() and clearInterval(). Both setTimeout() and setInterval() return a distinct ID. ClearTimeout() and clearInterval() use these IDs to clear the timer and stop the code execution before it starts. They both just have one parameter, which is ID.

Conclusion

This was about timers in JavaScript. If you are interested in learning JavaScript, do check out courses on codedamn with an in-built environment playground to learn and practice code. Join the community of codedamn and do check out other articles related to programming and development on codedamn and subscribe to our newsletter to never miss out on our new programs and updates. If you have any queries or feedback do let us know in the comment section, also if you sign up on the codedamn do check out the referral section, copy your link and refer to as many people as possible, and get exciting gifts, swags, and prizes from codedamn so don’t forget to check that out!

setTimeout()

setInterval()

Stop or cancel the timer

Conclusion

No comments so far