? Mastering JavaScript Event Loop and Concurrency Model! ?
Exercise 1: Understanding Asynchronous Execution
Problem: Write JavaScript code that logs "Start" first, then "Middle" after 2 seconds, and finally "End" after 4 seconds.
Explanation: Demonstrates how asynchronous functions are queued and executed in the event loop.
Code:
console.log("Start");
setTimeout(() => {
?console.log("Middle");
}, 2000);
setTimeout(() => {
?console.log("End");
}, 4000);
Exercise 2: Order of Execution with Promises
Problem: Write JavaScript code that logs the numbers 1, 2, and 3 in order using promises.
Explanation: Illustrates how promises are resolved asynchronously, affecting the order of execution.
Code:
Promise.resolve().then(() => console.log(1));
Promise.resolve().then(() => console.log(2));
Promise.resolve().then(() => console.log(3));
Exercise 3: Event Loop Execution Order
Problem: Write JavaScript code that logs "A" first, then "B" after a microtask, and finally "C" after a macrotask.
Explanation: Clarifies the order of execution between microtasks and macrotasks in the event loop.
Code:
console.log("A");
Promise.resolve().then(() => console.log("B"));
setTimeout(() => {
?console.log("C");
}, 0);
Exercise 4: Nested Asynchronous Operations
Problem: Write JavaScript code that performs two asynchronous operations sequentially: fetching user data and then fetching their posts.
Explanation: Demonstrates handling sequential asynchronous operations using promises.
Code:
const getUserData = () => {
?return new Promise(resolve => {
?setTimeout(() => {
?resolve({ id: 1, name: "Alice" });
?}, 1000);
?});
};
const getUserPosts = userId => {
?return new Promise(resolve => {
?setTimeout(() => {
?resolve(["Post 1", "Post 2", "Post 3"]);
?}, 1000);
?});
};
getUserData()
?.then(user => getUserPosts(user.id))
?.then(posts => console.log(posts));
Exercise 5: Handling Errors in Promises
Problem: Write JavaScript code that handles errors in a promise chain.
Explanation: Shows how to handle errors using the catch method in promise chains.
Code:
Promise.resolve()
领英推荐
?.then(() => {
?throw new Error("Oops!");
?})
?.catch(error => console.error(error.message));
Exercise 6: Parallel Asynchronous Operations
Problem: Write JavaScript code that performs multiple asynchronous operations in parallel and waits for all of them to complete.
Explanation: Demonstrates how to use Promise.all to execute multiple promises concurrently.
Code:
const promises = [
?Promise.resolve("Result 1"),
?Promise.resolve("Result 2"),
?Promise.resolve("Result 3")
];
Promise.all(promises)
?.then(results => console.log(results));
Exercise 7: Event Loop with setTimeout
Problem: Write JavaScript code that logs numbers from 1 to 5 with a delay of 1 second between each log.
Explanation: Illustrates how to use recursive setTimeout calls to create a delay in the event loop.
Code:
const logNumbers = (num, max) => {
?console.log(num);
?if (num < max) {
?setTimeout(() => logNumbers(num + 1, max), 1000);
?}
};
logNumbers(1, 5);
Exercise 8: Using setImmediate
Problem: Write JavaScript code that demonstrates the behavior of setImmediate compared to setTimeout.
Explanation: Shows how setImmediate differs from setTimeout in the event loop execution order.
Code:
console.log("Start");
setImmediate(() => console.log("Immediate"));
setTimeout(() => console.log("Timeout"), 0);
console.log("End");
Exercise 9: Concurrent HTTP Requests
Problem: Write JavaScript code that makes multiple HTTP requests concurrently and processes their responses.
Explanation: Demonstrates concurrent execution of asynchronous tasks using promises and async/await.
Code:
const fetchData = async () => {
?const [userData, postData] = await Promise.all([
?fetch('https://jsonplaceholder.typicode.com/users').then(response => response.json()),
?fetch('https://jsonplaceholder.typicode.com/posts').then(response => response.json())
?]);
?console.log(userData);
?console.log(postData);
};
fetchData();
Exercise 10: Scheduling Tasks with setImmediate
Problem: Write JavaScript code that schedules a task using setImmediate and observes its behavior.
Explanation: Illustrates how setImmediate schedules a task to execute immediately after the current event loop cycle.
Code:
setImmediate(() => console.log("Immediate task"));
console.log("End of script");