Event loop overview in Javascript - Mini Project: Build & Apply

Event loop overview

📖 Scenario: Imagine you are organizing a small party. You have a list of tasks to do, like setting up music, preparing snacks, and greeting guests. Some tasks take time, like waiting for the oven to heat up, while others are quick. You want to understand how JavaScript handles tasks that take time and tasks that are quick, so your party runs smoothly.

🎯 Goal: You will create a simple JavaScript program that shows how the event loop works by running tasks immediately and scheduling tasks to run later. You will see how JavaScript handles these tasks step by step.

📋 What You'll Learn

Create an array called tasks with three strings: 'Task 1', 'Task 2', and 'Task 3'.

Create a variable called delay and set it to 1000 (milliseconds).

Use a for loop with variable i to iterate over tasks.

Inside the loop, use setTimeout to schedule a function that logs the current task after delay milliseconds.

Immediately log 'Starting tasks' before the loop.

Immediately log 'All tasks scheduled' after the loop.

💡 Why This Matters

🌍 Real World

Understanding the event loop helps you write programs that handle waiting times without freezing, like loading images or responding to clicks.

💼 Career

Many jobs require writing smooth web apps or servers that handle many tasks at once without delays.

1

Create the tasks array

Create an array called tasks with these exact strings: 'Task 1', 'Task 2', and 'Task 3'.

Javascript

# Create the tasks array
# Your code here

Need a hint?

Use square brackets [] to create an array and separate strings with commas.

2

Set the delay time

Create a variable called delay and set it to 1000 (milliseconds).

Javascript

const tasks = ['Task 1', 'Task 2', 'Task 3'];
# Create the delay variable
# Your code here

Need a hint?

Use const to create a variable that does not change.

3

Schedule tasks with setTimeout

Use a for loop with variable i to iterate over tasks. Inside the loop, use setTimeout to schedule a function that logs tasks[i] after delay milliseconds.

Javascript

const tasks = ['Task 1', 'Task 2', 'Task 3'];
const delay = 1000;
# Use a for loop to schedule tasks
# Your code here

Need a hint?

Use setTimeout with an arrow function to delay logging each task.

4

Add immediate logs for start and end

Before the loop, write console.log('Starting tasks'). After the loop, write console.log('All tasks scheduled').

Javascript

const tasks = ['Task 1', 'Task 2', 'Task 3'];
const delay = 1000;
# Log 'Starting tasks' before the loop
console.log('Starting tasks');
for (let i = 0; i  {
        console.log(tasks[i]);
    }, delay);
}
# Log 'All tasks scheduled' after the loop
# Your code here

Need a hint?

Remember that console.log runs immediately, but setTimeout delays the logs.