concept

When writing Js programs, there is no doubt that you will encounter sending HTTP requests, reading database data, users click buttons… One thing they all have in common is that there are time-consuming operations, and there are non-time-consuming operations, and they are all waiting to be performed.

If all tasks are executed at the same time, which one should the processor execute first? Moreover, there are some indescribable relationships between most tasks to be executed. For example, a later task can be continued only after obtaining the execution result of the previous task; otherwise, an error may be reported directly.

synchronous

For example, a hundred people are queuing for a toilet, but there are only two pits in the toilet. At this time, people do not want to find other WC, so they can only wait for the people in front of them to come out and the people behind them to go in, so the cycle repeats.

Synchronization requires that multiple tasks must be queued up to be executed by the processor, and only after the previous task is completed can subsequent tasks be executed, that is, in order of precedence.

asynchronous

Or one hundred people go to the toilet, when you get close to the time you in front of the two eldest brother next to smoking did not notice himself, this time you go up first, may wait for you to come out they are also smoking…

Asynchrony requires that when more than one task needs to be executed, the fastest one should be executed first, not in order.

synchronous

Javascript is a single-threaded language, and only one thread (single thread) is responsible for interpreting and executing Javascript code in the browser, which means that the same Javascript engine can only perform one task at a time. At runtime, all tasks are queued up on the main thread of Javascript. When a task is executed, it is pushed onto the call stack, and when it is executed, it is pushed off the call stack.

To understand what the main thread is, we need to understand what the execution environment and the call stack are, okay

  • Execution context

Execution context refers to the context in which JavaScript code is executed. It is an abstract concept, as we all live in time, but time is invisible. As long as there is code running in JavaScript, it must be running in an execution context. The code of a function executes in the execution context of the function, while the code of a global environment executes in the global execution context, and each function creates its own execution context

  • The call stack

The call stack, as its name implies, is a stack, which is a data structure. Its job is to store the execution context of the code as it runs.

Javascript is similar to C in that code is executed line by line. Before the above code starts executing, the Javascript engine creates the call stack, then a global execution context (the main thread), and the code starts executing.

asynchronous

function f1(){
    console.log(1)}function f2() {
  setTimeout(() = > {
    console.log(2)},2000)}function f3(){
    console.log(3)
}


f1()
f2()
f3()

/ / 1, 3, 2
Copy the code

Because F2 is a time-consuming operation that takes 2s to complete, this triggers the asynchronous execution of Javascript.

If we want to print 123 instead of 132, we can use a callback to solve this problem

function f1(){
    console.log(1)}function f2(callback) {
  setTimeout(() = > {
    console.log(2)
    
    // This is f3()
    callback()
  }, 2000)}function f3(){
    console.log(3)
}

f1()
f2(f3)
Copy the code

F3 is passed in as a parameter to F2, and f2 calls f3 after the time-consuming operation, which ensures the order of code execution. The callback function is an asynchronous programming method in Javascript.