JS event loop priority

Question

I run this code on Nodejs and I expect that got an error but it worked! If I set 2500 ms to setTimeout I got an error and it’s normal. Is there anybody here to explain it for me? And why I see IIFE log first?

I run this code on browser and got error as I expected.

const data = [{}]
const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([1,2,3,4]);
    }, 3000);
  });

console.log('hiiii');

setTimeout(() => {
    data[0].map(e => console.log('to ',e))
  }, 2999);
(async() => {
     data[0] = await myPromise
     data[0].map(e => console.log('iife ',e))
    }
)()

console.log('byeeeee')

The below code is what I see on my console

hiiii
byeeeee
iife 1
iife 2
iife 3
iife 4
to 1
to 2
to 3
to 4

Side note: Don't use `.map()` just to iterate over a collection. That's what `.forEach()` is for. — Ivar, Feb 09 '22 at 14:00
It should throw an error that said data[0].map is not a function because data[0] is an object — radinvafaei, Feb 09 '22 at 14:00
My main question is about event loop nor how to iterate over an object! — radinvafaei, Feb 09 '22 at 14:01
Part of the answer: [Difference between microtask and macrotask within an event loop context](https://stackoverflow.com/questions/25915634/difference-between-microtask-and-macrotask-within-an-event-loop-context) — Ivar, Feb 09 '22 at 14:07
@Ivar - I'd say don't use `.forEach()` either as a regular `for/of` loop gives you so much more flexibility and doesn't create an extra function scope all the time. — jfriend00, Feb 09 '22 at 14:54
I’ve coded this code just for playing with event loop and understand logic of it. Buy thanks — radinvafaei, Feb 09 '22 at 14:58

Kevin Perry · Answer 1 · 2022-02-09T18:01:05.910

If line 10 happens to execute at least 1 ms after line 2, then its callback will get queued to run after the callback with the resolve() (and hence after the "iife" logging, which happens in the aftermath of the resolve()).

The solution is to move the second setTimeout() before the first one, to ensure their callbacks are queued in the expected order. So, for instance, this code:

const data = [[99]];
setTimeout(() => {
    data[0].forEach(e => console.log('to ',e))
  }, 2999);
const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([1,2,3,4]);
    }, 3000);
  });

console.log('hiiii');

(async() => {
     data[0] = await myPromise
     data[0].forEach(e => console.log('iife ',e))
    }
)();

console.log('byeeeee');

reliably produces this result:

hiiii
byeeeee
to  99
iife  1
iife  2
iife  3
iife  4

The logic of the event loop is such that calling setTimeout will queue its callback to become runnable x milliseconds after the current time. Once that amount of time passes, it then has to wait for whatever task is currently executing to finish, and then wait for any other tasks that got queued ahead of it, before it can actually run.

Not sure what you're trying to do, but you'll never get the "to 1" line to appear before the "iife 4" line, because everything from setting data[0] to logging "iife 4" happens inside a single, synchronous chunk of code.

Why has my answer been down-voted? The issue here is totally about the relative timing of the creations of the timers. I'll just note that after some experimentation, I found that on my hardware, with a timeout value of 2991 instead of 2999, the above code sometimes succeeds and sometimes throws the expected error on data[0].map. Adding console logging of current milliseconds shows that it is taking typically about 10 ms between the two setTimeout calls. This is what's causing OP's unexpected results. — Kevin Perry, Feb 09 '22 at 16:23
10ms between the two setTimeout calls? That's certainly the time to load the Console API, try to make a warmup call before. However, you don't need to have an actual full ms between the two calls, it suffices that the first is done at e.g 0.999ms and the second at 1.001ms to have the same result. — Kaiido, Feb 10 '22 at 06:13

score 1 · Answer 2 · answered Mar 29 '22 at 05:53

The questions related to asynchronous JavaScript can be answered by investigating the event loop only.

How asynchronous JavaScript works?

The call stack executes the functions. Web APIs is the place the async operations (fetch requests, promises, timers) with their callbacks are waiting to complete.
The task queue (also named macrostasks) is a FIFO (First In, First Out) structure that holds the callbacks of async operations that are ready to be executed.
The job queue (also named microtasks) is a FIFO (First In, First Out) structure that holds the callbacks of promises that are ready to be executed.
Finally, the event loop permanently monitors whether the call stack is empty. If the call stack is empty, the event loop looks into the job queue or task queue, and dequeues any callback ready to be executed into the call stack.

Let's take an example:

setTimeout(function timeout() 
{
    console.log('Set timeout finished!');
}, 0);

Promise.resolve(1).then(function resolve() 
{
   console.log('Resolved!');
});

The immediately resolved promise is processed before an immediate timeout. Because of the event loop priorities dequeuing jobs from the job queue (which stores the fulfilled promises' callbacks) over the tasks from the task queue (which stores timed out setTimeout() callbacks).

JS event loop priority

2 Answers2