How are the Event Loop, Callback Queue, and Javascript’s single thread connected?

Question

GENERAL GOAL

I’d like to know how the following pieces of a javascript environment interconnect as a system.

• Javascript Engine

Answer 1

Your understanding and your example seem to be basically correct. Now, to your questions:

On step 3, who produces this new thread? Is it the browser?

Yes. It is basically the thing that supplies the implementation for those "truly asynchronous" functions. IIRC, setTimeout is implemented in JS engines directly, while networking IO would be definitely the browser's responsibility - but it doesn't really matter who creates them. In the end, in your "browser environment" it's always some part of the browser.

This new thread is being blocked correct?

Yes. No. It depends on the work that needs to be done, i.e. which async function you called. Some may require spinning of a new thread, but for simple timeouts I'm pretty sure that a non-blocking system call is used.

What happens if you have a loop that creates 1000 setTimeouts. Are 1000 ‘threads’ created?

Possible. Unlikely, though. I'd assume for those async actions that really require their own thread, a thread pool is used, and requests are queued. The size of this pool might be hidden in the bowels of your browser's configuration.

Is there a limit to how many threads can be spawned at a time?

That would be controlled by the OS.

When new thread finishes executing, how does it end up on the queue? Who supplies the Event Queue?

Basically, the last action of each such thread is to put its result in the event queue.

Who supplies the Event Loop? Does the event loop poll the Event Queue?

I'd say that's an implementation detail, whether the loop polls the queue or the queue drives the loop iterations.

Is the javascript’s thread aware of an event loop? Or does the Event loop just push things onto the stack?

I'd say that the javascript runs in the event loop thread. The event loop just repeatedly pops events from the queue and executes their javascript.

How does the Event loop know when the stack is clear?

The event loop calls the javascript execution - so the stack is clear when the javascript returns.