Synchronization and asynchronousness in JavaScript

In the process of learning JavaScript, synchronization and asynchronousness are two very troublesome concepts, especially for beginners. Simply put, when two or more things happen at the same time, it is called synchronization; when they do not happen at the same time, it is called asynchronous.

Although these two concepts seem simple, it takes a lot of effort to actually understand them. We need to understand through actual operations what situations are synchronous and what situations are asynchronous.

You may think that ordinary JavaScript functions are synchronous. When you use setTimeout() and AJAX, you may also think that they are synchronous, right? If I told you that these two functions can also be asynchronous at certain times, would you believe it?

To explain the reason clearly, we need Mr. X to help.

Scenario 1: Mr X tries to use synchronicity

Conditions:

• 1 Mr assigned tasks.

• 2 The only way to contact him is to call.

• 3 No matter what problems or tasks you encounter, if you want to ask Mr. X for help, you have to call him.

• 4 Mr X will provide you with answers, or complete the task immediately, and notify you after completion.

• 5 With the help of Mr. X, you completed the task and then went out to watch a movie.

In this process, what you and Mr. X accomplish is synchronous communication.

When you ask questions, he is listening; when he gives answers, you are also listening at the same time.

Scenario 2: Mr. . So, when you call him, the line is always busy. You can't ask him questions, and he can't answer them for you.

So how can Mr. X deal with this situation?

1 Mr X hires an assistant Mr M and is equipped with an answering machine.
2 Mr M’s job is to listen to the messages on the answering machine and then summarize the questions and give them to Mr X.
3 In this way, when you call Mr. Mr X called back.
4 After answering the questions asked by others, Mr. X will call you back and tell you the solution.
So the question is, is this process synchronous communication or asynchronous communication?

It can be said that it is both. When you leave a message on the answering machine, Mr. X is not listening, so this is asynchronous communication.

But when he calls back, the two of you are communicating synchronously.

Now you should understand synchronous and asynchronous communication. Now let’s talk about synchronization and asynchronousness in JavaScript.

JavaScript – An Asynchronous Programming Language

When someone says that JavaScript is an asynchronous language, what they mean is that, in general, when using JavaScript, you need to understand It takes messages, and when you call it, you don't hear a busy signal.

Function calls in JavaScript never happen directly, they are done through message messages.

JavaScript uses a message queue, where new incoming messages (or events) are temporarily stored. The event-loop continuously processes these messages and sends them to the call stack, where the corresponding message functions are stacked into frames for execution (the independent and dependent variables of the function).

The call stack contains the frame of the first function called, as well as the frames of other functions called through nested calls on top of this function.

When a message is added to the queue, it will wait until the previous message frame in the call stack has been processed. After the previous message is processed, the event-loop will remove it from the queue and then add the corresponding frame of the current message to the call stack.

This message starts waiting again, instructs the call stack to clear its corresponding frame, and then is removed from the queue.

Look at the following code:

 function foo(){}function bar(){  foo();
}function baz(){  bar();
}
baz();

The function being run here is baz(), which is located at the last line of the code segment. It will be added to the queue as a message. When the event-loop selects When it does, the call stack begins stacking frames for baz(), bar(), and foo() during execution.

After the execution of the functions is completed, their frames will be removed from the call stack, and the message will still wait in the queue until baz() is on the stack was ejected.

Remember, function calls in JavaScript are never done directly, but through messages.

What are those specific asynchronous methods?

So far, I have come across some APIs, such as setTimeout() and AJAX, which are specifically indicated as asynchronous methods. what happened?

One very important thing is to understand which things happen synchronously and which things happen asynchronously. With the help of events and event-loops, JavaScript can process messages asynchronously, but this does not mean that everything in JavaScript is asynchronous.

I said before that the message will not leave the queue until the call stack clears the corresponding frame. For example, it's like you won't go out to watch a movie until you get the answer - what happens at this time is synchronous: you stand there waiting for the task to be completed, and only leave after seeing the task completed with your own eyes. .

The above is the synchronization and asynchronous content of JavaScript. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!