JavaScript for Kids: Timers Tutorial

I hope you learned something cool in our Arrays and Loops tutorial. Now lets get to know Timers.

Timers in JavaScript are built in functions that execute code in a preset time. setInterval() and setTimeout() are the two famous functions in JavaScript.

setInterval():

setInterval() is a Timer function that repeats forever until you unset it. Think of it like a while loop but this time it involves time. It has two arguments: function and the time in milliseconds you want it to repeat.

let count = 5;
let countdown = setInterval(function() {
    console.log(count);
    count--;
    if (count < 0) {
        console.log("Time's up!");
        clearInterval(countdown);
    }
}, 1000);

This is like a countdown clock. We start at 5 and count down every second:

• We print the current number (5, 4, 3, 2, 1).

• We decrease the number by 1 (count--).

• If the number goes below 0, we say "Time's up!" and stop the countdown.

setTimeOut():

This function also has two arguments: the function and the time in milliseconds you want it to fire.

console.log("Starting the countdown!");
setTimeout(function() {
    console.log("Blast off! 🚀");
}, 3000);

Can you guess what will happen to the code above? Yes you're right! The code will run after three seconds and print "Blast off! 🚀"

Combining the two:

let annoyingReminder = setInterval(function() {
    console.log("Don't forget to drink water! 💧");
}, 2000);

setTimeout(function() {
    clearInterval(annoyingReminder);
    console.log("Reminder stopped.");
}, 10000);

Imagine a robot that reminds you to drink water:

• Every 2 seconds, it says "Don't forget to drink water! 💧".

• But we don't want it to go on forever, so we set another timer for 10 seconds.

• After 10 seconds, we tell the robot to stop reminding us and say "Reminder stopped."

Key points:

• setTimeout does something once after waiting.

• setInterval does something over and over again at regular times.

• clearInterval is like pressing a stop button on a timer.

• Time in JavaScript is usually in milliseconds (1000 milliseconds = 1 second).

Homework: Create a Simple Traffic Light

Your task is to create a traffic light that changes colors automatically. Here's what you need to do:

1. Create three variables for the traffic light colors: red, yellow, and green.

2. Use setInterval to change the traffic light every few seconds.

3. Use console.log to show which color is active.

4. Make the traffic light run for 30 seconds, then stop.

Here's a starting template:

// Traffic Light Colors
let red = "🔴";
let yellow = "🟡";
let green = "🟢";

// Current light
let currentLight = red;

// Your code here
// 1. Create a function to change the light
// 2. Use setInterval to call this function every few seconds
// 3. Use setTimeout to stop the traffic light after 30 seconds
// Hint: You can use console.log(currentLight) to show the current light

Bonus challenges:

1. Add a "pedestrian crossing" light that shows up every other cycle.

2. Make the yellow light stay on for a shorter time than the red and green lights.

Remember:

• Red light should last 5 seconds

• Yellow light should last 2 seconds

• Green light should last 5 seconds

Good luck! Let me know if you'd like to see a solution or need any hints. Put your answers in the comments and don't forget to like & share!