Main Tips on Using JavaScript Timers: SetTimeOut vs SetInterval

JavaScript timing events, or the JavaScript timer feature, defines a function and sets a specific time for its execution. You can also allow a continuous display of functions. Timing events are especially useful when you want to display popups.

This tutorial covers the JavaScript timing events, their types, and usage. You will also learn about the functions used to cancel them. Keep in mind that even though in the examples you'll mostly see JavaScript alert, you can use JavaScript timer events with other features as well.

JavaScript Timer: Main Tips

• JavaScript allow executing code in specified time intervals. This functionality is called timing events.
• You can cancel this functionality using clearTimeout() and clearInterval() functions.

Most Common Timer Functions

The variety of functions JavaScript offers is amazing. Using them, you can perform various tasks, thus providing your website with any functionality.

When we wish to execute timing events, we can also choose from a few methods that have different useful functions each. We will now discuss the most commonly used ones and review examples to illustrate each one.

setTimeOut()

This is probably the most common timing event method: it calls a function after a time you have specified passes.

Look at the example below. If you click a button, a JavaScript alert message will pop up after 2 seconds (2000 milliseconds):

<button onclick="setTimeout(showAlert, 2000)">Click me!</button>

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

clearTimeOut()

This JavaScript timer function cancels the JavaScript setTimeout() function before it is executed.

In the example below, the setTimeout() function again calls a JavaScript alert to pop up after 2 seconds. However, if you call a clearTimeout() function before the seconds pass, it will be canceled:

<button onclick="myVar = setTimeout(showAlert, 2000)">Try it</button>

<button onclick="clearTimeout(myVar)">Stop it</button>

setInterval()

This JavaScript timer function sets an interval in milliseconds when something should change. In the example below, the displayed time changes every 2 seconds:

var exampleVar = setInterval(exampleTimer, 2000);
function exampleTimer() {
   var d = new Date();
   document.getElementById("example").innerHTML = d.toLocaleTimeString();  
}

clearInterval()

This JavaScript timer function clears the interval, stopping it from running:

var exampleVar = setInterval(exampleTimer, 0);
function exampleTimer() {
    var date = new Date();
    document.getElementById("example").innerHTML = date.toLocaleTimeString();
}

JavaScript Timer: Summary

• JavaScript timing events means running the code in defined time intervals.
• You can use JavaScript setTimeOut() function to execute some functionality after a specified amount of time.
• You can use setInterval() function to execute some functionality continuously with defined breaks inbetween.
• You can cancel a setTimeOut() by calling clearTimeOut() function.
• You can cancel a setInterval() by calling JavaScript clearInterval() function.
• You can combine this functionality with other JavaScript features, like a JavaScript alert popup.