Timers & Intervals

1What Are Timers and Intervals?✨

Timers and intervals in JavaScript allow you to schedule actions to occur after a certain amount of time or repeatedly at set intervals. This is useful for creating dynamic web applications that require timed events, like animations or updating content.

2Using setTimeout🎯

The setTimeout function allows you to execute a piece of code after a specified delay. Here’s how it works:

setTimeout(() => {
    console.log("This message appears after 3 seconds!");
}, 3000);

In this example, the message will be logged to the console after 3 seconds.

3Using setInterval💡

setInterval lets you run a function repeatedly at specified intervals. This is great for tasks that need to happen over and over. Here's an example:

let count = 0;
const intervalId = setInterval(() => {
    count++;
    console.log("Count: " + count);
    if (count === 5) {
        clearInterval(intervalId);
    }
}, 1000);

This code counts up every second until it reaches 5, then stops.

4Clearing Timers and Intervals🚀

You can stop a timer or interval using clearTimeout or clearInterval. This is important for managing resources and preventing unwanted behavior. For example:

const timerId = setTimeout(() => {
    console.log("This will not run.");
}, 5000);
clearTimeout(timerId);

The clearTimeout function prevents the message from being displayed.

5Practical Applications🔍

• Timers and intervals can be used in various real-world applications, such as:
• ✓ Slideshow presentations that change slides automatically
• ✓ Countdown timers for events
• ✓ Refreshing data from a server at regular intervals
• ✓ Animations that require repeated actions

6What You'll Build This Grade⭐

In this lesson, you will create a fun countdown timer that updates every second, and an interactive quiz that shows questions at timed intervals. These projects will help you understand how to manage time-based actions in JavaScript!