Sequential vs parallel execution in Javascript - Visual Side-by-Side Comparison

Concept Flow - Sequential vs parallel execution

Start

↓

Task 1

↓

Task 2

↓

Task 3

↓

End

↓

Start

↓

Task1

↓

Task3

↓

End

Sequential runs tasks one after another. Parallel runs tasks at the same time.

Execution Sample

Javascript

console.log('Start');
setTimeout(() => console.log('Task 1'), 1000);
setTimeout(() => console.log('Task 2'), 500);
console.log('End');

Shows how JavaScript runs code sequentially but schedules tasks to run later in parallel.

Execution Table

Step	Action	Output	Notes
1	console.log('Start')	Start	Runs immediately
2	setTimeout Task 1 scheduled		Task 1 will run after 1000ms
3	setTimeout Task 2 scheduled		Task 2 will run after 500ms
4	console.log('End')	End	Runs immediately after scheduling
5	After 500ms, Task 2 runs	Task 2	Runs before Task 1 because shorter delay
6	After 1000ms, Task 1 runs	Task 1	Runs last
7	All tasks done		Execution complete

💡 All scheduled tasks have run; no more code to execute.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
Task 1 Timer	undefined	Scheduled (1000ms)	Scheduled (1000ms)	Executed
Task 2 Timer	undefined	Scheduled (500ms)	Scheduled (500ms)	Executed

Key Moments - 2 Insights

Why does 'End' print before 'Task 1' and 'Task 2'?

Because console.log('End') runs immediately in the main thread, while setTimeout schedules tasks to run later asynchronously (see execution_table steps 4 and 5).

Why does 'Task 2' print before 'Task 1' even though Task 1 was scheduled first?

Because Task 2 has a shorter delay (500ms) than Task 1 (1000ms), so it runs first after the delay (see execution_table steps 5 and 6).

Visual Quiz - 3 Questions

Look at the execution_table, what is printed at Step 4?

A Task 1

B Start

C End

D Task 2

💡 Hint

Check the 'Output' column for Step 4 in the execution_table.

At which step does 'Task 2' run?

A Step 2

B Step 5

C Step 4

D Step 6

💡 Hint

Look for when 'Task 2' appears in the 'Output' column in the execution_table.

If both setTimeout delays were 0ms, what would change in the execution_table?

A Task 1 and Task 2 would run after 'End' but at the same time.

B Task 1 and Task 2 would run immediately before 'End'.

C 'End' would print last.

D No change; order stays the same.

💡 Hint

Remember setTimeout with 0ms delay still runs after current code finishes (see variable_tracker and execution_table timing).

Concept Snapshot

Sequential execution runs code line by line.
Parallel execution runs tasks at the same time.
JavaScript uses event loop to handle parallel tasks.
setTimeout schedules tasks to run later asynchronously.
Immediate code runs before scheduled tasks.
Tasks with shorter delay run earlier.

Full Transcript

This visual shows how JavaScript runs code sequentially but schedules some tasks to run later in parallel using setTimeout. The code prints 'Start', schedules two tasks with different delays, then prints 'End'. The tasks run after their delays, so 'Task 2' prints before 'Task 1' because it has a shorter delay. Variables track the timers scheduled and when they execute. Key moments clarify why 'End' prints before tasks and why task order depends on delay. The quiz tests understanding of output order and timing. This helps beginners see how sequential and parallel execution work together in JavaScript.