-1

When it is time to execute the callbacks of then, catch, or finally, where are they executed?

From what I have read on Stack Overflow, it is said that they are executed in the call stack of the main JS thread (since JS is only single threaded).

So, if this is true, does it mean that these callbacks are executed until the call stack is empty?

If all this is true, does the same apply for async-await?

  • 1
    See [this Q/A](https://stackoverflow.com/questions/21607692/understanding-the-event-loop). Also google "Javascript microtask resolution". – Jared Smith Feb 24 '23 at 23:20
  • 3
    `async/await` are just syntactic sugar for `return new Promise()` and `.then()` – Barmar Feb 24 '23 at 23:29
  • hi @Barmar thanks, +1. So, do the callbacks end up running on the main JS thread? –  Feb 24 '23 at 23:33
  • 3
    Yes. Unless you use something like webworkers, all your JS code runs in the main thread. – Barmar Feb 24 '23 at 23:34
  • thanks + 1. Only the asynchronous computation itself if running outside the JS thread, right? @Barmar –  Feb 24 '23 at 23:37
  • i.e. "is delegated" outside the thread so as not to lock it –  Feb 24 '23 at 23:39
  • 2
    Right. E.g. if you send a fetch, the browser has another thread that communicates with the server. But this isn't a JS thread, it's internal browser code. – Barmar Feb 24 '23 at 23:40
  • 2
    Asynchronous tasks are delegated to the host environment (the browser or whatever). Upon completion the host pushes the callbacks into the js event queue. – ray Feb 24 '23 at 23:42
  • excellent @Barmar, now it's a little clearer +1 –  Feb 24 '23 at 23:43
  • hi @ray +1, and from there they "go" to the call stack of the JS main thread, right? –  Feb 24 '23 at 23:45
  • 2
    Right. The js runtime periodically checks the queue for pending tasks as part of its event loop. If the call stack is empty it checks the queue for other stuff to do. – ray Feb 24 '23 at 23:47
  • 2
    It’s the same way click events, etc. get picked up by the js environment. – ray Feb 24 '23 at 23:53
  • 2
    More details here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#queue – ray Feb 25 '23 at 00:00
  • excellent @ray +2, thanks for the complementary info, I didn't know that event listeners worked the same way. –  Feb 25 '23 at 01:03

1 Answers1

0

it is said that they are executed in the call stack of the main JS thread

Yes.

So does it mean that these callbacks are [not] executed until the call stack is empty?

Yes, like any other asynchronous callback they will need to wait until the call stack is empty, and a long-running script will block them from executing.

Does the same apply for async-await?

Yes.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • hi @Bergi +1 thank you for confirming this. *a long-running script will block them from executing* - That means that the callback can **also** in turn block the thread if it has "heavy" code, right? –  Feb 25 '23 at 01:08
  • i.e., because asynchronous callbacks are executed on the call stack, they can also block the JS thread if they have long running code @Bergi –  Feb 25 '23 at 01:20
  • 2
    Yes, any piece of synchronous code that's currently running is blocking everything else. – Bergi Feb 25 '23 at 09:16
  • thank you very much +1, I had never seen it from that point of view, this is worth gold. –  Feb 25 '23 at 12:29
  • 1
    @Coder23 Promises are not "executed". Promise callbacks are, if that's what you meant - and yes, like any other asynchronous callbacks they are only executed by the event loop when nothing else is. – Bergi Feb 25 '23 at 23:56
  • yes, that's what I mean, that all the code (the synchronous one) of the main JS thread is executed first *until its end* in order to **start executing** the `async` (`async-await`) functions and callbacks of the promises, right? @Bergi –  Feb 26 '23 at 01:37
  • I did not make myself clear, sorry @Bergi –  Feb 26 '23 at 01:39
  • 1
    Actually the first part of an `async` function (until the first `await`) is executed immediately when you call the function, but otherwise yes. – Bergi Feb 26 '23 at 10:44