Think you understand the JavaScript Event Loop? What order do you think these logs appear in? 1️⃣ sync → setTimeout → fetch 2️⃣ sync → fetch → setTimeout 3️⃣ fetch → sync → setTimeout Drop your answer before checking the console 👇 #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #EventLoop
It depends on the speed of the API call. If it takes less than ~4ms, fetch will execute before setTimeout. Otherwise, in most cases, the order will be: sync -> timeout -> fetch
Sync -> setTimeout -> fetch First of all setTimeout function is executed and the callback function is stored, the process starts in a background thread which takes 0 seconds or we can say the timer is immediately expired and the callback function is pushed into the callback queue. Meanwhile, all these things happening, fetch is being executed in the main thread, and stores its callback function in the promise object returned by the fetch. The actual network request is made from an another background thread and this thread will be waiting for its response. As soon as the response comes, it will be push the callback function to the microtask queue but here's the catch, the api response cannot be immediate, It will definitely be greater than 0 ms So, at this point of time, we have only setTimeout callback function in the queue. Now, the "I am sync" will be logged, then callback from the callback queue will be called and finally whenever the api response is resolved, its callback function is popped from the microtask queue, executed inside the callstack.
In normal case, sequence will be : sync then fetch then setTimeout. Due to precedence of execution=> synchronous > microtask queue > macrotask queue. But if the API is very slow, Promise isn’t resolved yet, there is no microtask in the queue, so it becomes: sync then setTimeout then fetch Reason: microtasks run first only when they’re available.
1 or 2 that depends on how long the request takes
Answer: sync → fetch → setTimeout "console.log" runs first (synchronous). "fetch().then()" is a microtask, so it runs before the macrotask queue. "setTimeout" is a macrotask, so it executes last.
Sync --> fetch --> set timeout. First execution will be normal console then promises(micro task queue) then set time out( macro task queue).
Executing all synchronous code (call stack). Then resolving all microtasks (like .then, await, queueMicrotask). Then processing one macrotask (like setTimeout, setInterval, or I/O).
console.log fetch function setTimeOut
Ambigous scenario, if fetch responds immediately by the time the event loop checks micro task queue then the code inside then block otherwise timeout first.
Sync → timeout → fetch In real Node.js execution, a real network fetch does not resolve immediately. Even with setTimeout(0), the timer runs in the timers phase, while the API response completes later in the poll phase. So practically, the output will be: I am sync → I am setTimeout → I am fetch. Microtasks run before macrotasks, but only after they are actually resolved.