Event loop overview in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to log 'Hello' after 1 second using setTimeout.

Javascript

setTimeout(() => { console.log('Hello'); }, [1]);

Drag options to blanks, or click blank then click option'

A0

B1

C500

D1000

Attempts:

3 left

💡 Hint

Common Mistakes

Using 1 instead of 1000 causes almost no delay.

Using 0 runs immediately after current code.

The setTimeout function delays execution by the given milliseconds. 1000 ms equals 1 second.

2fill in blank

medium

Complete the code to add a function to the event loop queue using Promise.resolve().then.

Javascript

Promise.resolve().[1](() => console.log('Done'));

Drag options to blanks, or click blank then click option'

Athen

Bcatch

Cfinally

DsetTimeout

Attempts:

3 left

💡 Hint

Common Mistakes

Using catch instead of then.

Using setTimeout which schedules a macrotask.

The then method schedules the callback to run after the current call stack, using the microtask queue.

3fill in blank

hard

Fix the error in the code to correctly log 'First' then 'Second' using setTimeout.

Javascript

console.log('First');
setTimeout(() => console.log('Second'), [1]);

Drag options to blanks, or click blank then click option'

A1000

B0

C'0'

D'1000'

Attempts:

3 left

💡 Hint

Common Mistakes

Using string '1000' instead of number 1000.

Using 0 or '0' which causes immediate callback.

The delay must be a number, not a string. 1000 means 1 second delay.

4fill in blank

hard

Fill both blanks to create a microtask that logs 'Microtask' and a macrotask that logs 'Macrotask'.

Javascript

Promise.resolve().[1](() => console.log('Microtask'));
setTimeout(() => console.log('Macrotask'), [2]);

Drag options to blanks, or click blank then click option'

Athen

Bcatch

C0

D1000

Attempts:

3 left

💡 Hint

Common Mistakes

Using catch instead of then.

Using 1000 delay which delays macrotask by 1 second.

then schedules a microtask, which runs before macrotasks like setTimeout. Delay 0 means run as soon as possible after current tasks.

5fill in blank

hard

Fill all three blanks to create a code that logs 'Start', then a microtask 'Middle', then a macrotask 'End'.

Javascript

console.log([1]);
Promise.resolve().[2](() => console.log('Middle'));
setTimeout(() => console.log([3]), 0);

Drag options to blanks, or click blank then click option'

A'Start'

Bthen

C'End'

Dcatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using catch instead of then.

Swapping 'Start' and 'End' logs.

Logging 'Start' first, then scheduling a microtask with then to log 'Middle', and a macrotask with setTimeout to log 'End'. This shows event loop order.