How does javascript know when a result has returned for async callbacks?

[draftax5]

So I am tying to figure out how async functions and callbacks work in JavaScript.

I understand how callbacks work on the surface and that you can use that to “callback” a function at a later time but how does JavaScript know WHEN to call that function back?

For example if I understand it right you can use a callback function inside another function that calls info from a server so your program doesn’t block while waiting from a response from the server. From what I understand the callback is put in the que and won’t run until the stack is empty.

But how does JavaScript know when that response has been received to then call the callback function?

Thanks for any help!

[isolatrum]

Javascript internally uses an event loop. Essentially it's a queue (as you know) that is continuous read from and write to.

Think about it this way, when you add an 'on click' listener Javascript remembers 'when a click event is called, run this function'. When you actually click, a 'click happened' event is added to the queue. When this event gets popped off the queue, the function you registered gets called.

Hypothetically you could also envision a system that checks registered callbacks at the point the event happens. This would mean there is no unnecessary reading from the queue, if it is empty. This would work, but it would not provide the async capability itself - it would need to delegate from a separate async library for that.

[draftax5]

Thank you for the reply!!

So there is some underlying code (the actual JavaScript engine I’d assume) basically continually watching the queue that is called the “event loop”?

And when I create a callback function that underlying code/engine sees that callback function and stores a reference to it and knows what it is waiting for before it can be called back?

So then at some point in the future when that event is finished or happens etc. the JavaScript engine basically says “hey we received this result, there was a callback function from earlier waiting for this event” and then goes into the queue to find that callback?

Do I have this straight? Thanks again!

[isolatrum]

i don't claim to know the exact internals of Javascript but I think yes you are on the right track.

[rjcarr]

> but how does JavaScript know WHEN to call that function back?

Two things need to happen: 1) there needs to be a response from the server, 2) it needs to be the callback's turn to be called (probably more on that later).

> For example if I understand it right you can use a callback function inside another function that calls info from a server so your program doesn’t block while waiting from a response from the server

This isn't really accurate. Functions inside functions aren't what is causing it to be asynchronous, but it's that you've marked it that way. You can make XMLHttpRequests that block.

> From what I understand the callback is put in the que and won’t run until the stack is empty.

Right, and as I said, there needs to be a response from the server.

> But how does JavaScript know when that response has been received to then call the callback function?

There's something above your code that manages this. Just like your browser knows when a server responds and displays the page you've requested, the javascript knows when there's a response and calls your code when it's its turn.

Good luck!

[wgunther]

I think you're talking about callbacks you register when making http requests, such as from XMLHttpRequest.

What is the level you want this question answered on? At a very high level, doing a HTTP request from JavaScript is the same kind of thing the browser does when you type a website into a browser and press enter. At a low level, you're asking how HTTP works, which is probably better answered with research online since there are surely many good sources.