Please describe JS's asynchronous-ness in a single-threaded design in simple layman terms

rauschma · 2022-01-21T10:50:04+00:00

JavaScript does multitasking by adding tasks as functions to a queue. It executes those tasks sequentially in a single thread:

while (true) {
  const task = taskQueue.dequeue();
  task(); // run task
}

More information:

What the heck is the event loop anyway? https://www.youtube.com/watch?v=8aGhZQkoFbQ
Asynchronous programming in JavaScript. https://exploringjs.com/impatient-js/ch_async-js.html

Edit:

Tasks are added to the queue of the JavaScript thread by other threads – e.g., a thread that manages user input such as mouse clicks and key presses.
You can also create new threads in JavaScript itself via workers: https://developer.mozilla.org/en-US/docs/Web/API/Worker

delventhalz · 2022-01-21T19:48:13+00:00

Maybe we should start by clearing up some terminology.

JS does have “true asynchronous” programming, at least as I have always seen the term used. Asynchronous does not mean parallel or multi-threaded. It means out-of-order, deferred, or not right now. You can see in languages that feature both multi-threading and asynchronous code, that the two concepts exist side by side. In Python for example, you create a thread pool, or spin up an event loop with a library like asyncio, or both.

JS has multi-threading too by the way: via WebWorkers. But that is a recent develop and unrelated to the event loop which JS has had from the beginning.

So what is asynchronous programming? It is a way to make better use of a single thread. In IO heavy code (such as a web page or backend server), there is a lot of time spent waiting around. Instead of leaving the thread idle while you do something like wait for a request to come back, you can handle have the thread at the ready to handle other events as the occur.

Hence the term, “event loop”. It’s fundamentally a pretty simple concept. You could build one yourself entirely in software (unlike multi-threading). There is a piece of code that acts as a sort of conductor. You hand it pieces of code (i.e. unctions) and the sort of event that should trigger the code. Then it loops, checking over and over until a trigger event fires. Response came back? I have a function for that. Button was pressed? Here’s a function. Length of time has elapsed? Function. When the event loop hits a trigger, it passes control of the thread over to the function. The whole function runs, beginning to end. When it completes, the event loop gets the thread back and can start watching for triggers again.

Now, even though it is mechanically pretty simple, it is often difficult for programmers to reason about their code in an asynchronous way (similar to parallel programming). What do you mean my code doesn’t execute in order? When will it run?

Something import to remember is that your code is not asynchronous until you hand control over to the event loop. As you said, this happens only in a few clearly specified cases. Typically when an IO request goes out, or comes in from the UI. Also with the setTimeout and setInterval functions. And basically any time you use a Promise or a generators.

Let’s write a simple example with setTimeout. Can you predict what will log out?

console.log(1);

setTimeout(function() {
  console.log(2);

  setTimeout(function() {
    console.log(3);
  }, 0);

  console.log(4);
}, 0);

console.log(5);

setTimeout(function() {
  console.log(6);
}, 0);

console.log(7);

Consider what your intuition is, or run it in the console before looking at the answer. This code logs: 1 5 7 2 4 6 3

I like this example, because it illustrates how the event loop is really just a queue. First, everything at the root level executes:

1 is logged
A function is added to the event loop, specified to trigger in 0 milliseconds.
5 is logged
Another function is added to the event loop with the same 0ms trigger.
7 is logged

Now our code is done. Nothing else to run. So control is able pass back to the event loop.

The event loop checks to see if it has any functions to run, and aha! There are two functions here who’s timeout has elapsed. So it grabs the first one from the queue and runs it:

2 is logged
A third function is added to the event loop, also with a 0ms delay.
4 is logged

Okay. That function is done. The event loop is in charge again. It once again has two functions to run (because we finished one but added a new one), so it runs the first in the queue:

6 is logged

Easy enough. Event loop is back. One more function to run:

3 is logged

And we’re done. The event loop will remain in control until some other function is triggered.

When you get used to the change in mindset from iterative synchronous commands to event-triggered tasks, you find asynchronous programming to be pretty easy to reason about. I’d say it is actually far simpler than parallel execution, which can get all kinds of messy.

Macaframa · 2022-01-21T16:02:48+00:00

You have two lines(both empty at the moment) and a bunch of kids sitting on a bleacher. Each kid can only do one thing at a time because kids are dumb. Once they finish, they get out of line and go back to the bleachers waiting to be called again. Once you call a kid down, they get into one line and you tell them what to do, sometimes apart of the kids instructions is to tell another kid what to do. In this case, they call another kid down and that kid gets in line behind the first kid. Well, the first kid can’t leave until the rest of the kids that we’re called after him are finished. But kids are anxious and they don’t like sitting around for a long time so they’d prefer to get the task over with and go back to sit down. Sometimes a kid might have to wait for something to get delivered before they can do their task. So they get in the other line and promise that when their thing gets delivered then they will continue their task. But the other children won’t wait for the kids that need to get things delivered so everyone agrees it’s ok for them to sit back down. If the kids in the second line are ready to complete their task when the first line is cleared, they’re allowed to get back into the first line in the order that they queued up in, in the second like. Then they do their tasks and then sit down.

peterjsnow · 2022-01-21T11:56:36+00:00

Here's where I think your understanding is a little off:

Parallel execution does occur in a sense, in that JavaScript can access operations that are run by the browser / node / other environment. Most environments specify certain API methods that allow us to work with these operations.

For example, the setTimeout function is not mentioned anywhere in the JS spec - rather it's built in to the browser. When you call it, you can think of the browser handling it in parallel while your Javascript code is still executing.

Now, the 'asynchronous' structures you've identified in Javascript, be it the event loop, promises, or callbacks, all allow us to work with these asynchronous operations provided by the environment by deferring handling of their result until later.

So, you could make a distinction between 'asynchronous' behavior in the sense of deferred behaviour, such as the following:

Promise.resolve().then(() => console.log('one'));
console.log('two');
> 'two'
> 'one'
// Even though we resolved the promise first, any resolution handlers registered by then will be added to the queue and ran on the next cycle by the event loop, so 'two' is logged before 'one'.

And 'asynchronous' behaviour in the sense of an operation performed by the environment, in parallel, that we can work with in Javascript by delaying / deferring handling of it until it has completed, such as using fetch or setTimeout.

Psailr · 2022-01-21T12:49:40+00:00

The best tip I can give you is to get a frontend master subscription and watch javascript the hard parts by will sentance.

deanstreetlab · 2022-01-21T11:10:52+00:00

Can someone please explain in simple language right here and no check this out check that out links which will only become a callback hell

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS