This is the 13th day of my participation in the August More Text Challenge.More challenges in August

JavaScript execution environments such as browsers or NodeJS run on a single thread as the main thread. Single thread means that there is only one thread in the JS engine that is responsible for interpreting and executing JavaScript code. It means that the execution context of JS can only complete one task at a time, and then the next task can be executed. It will block other tasks, which is the main thread.

synchronous

The synchronization task is stored on the stack. Each synchronization task is clearly synchronized at a time. Only one task can be run at a time.

asynchronous

In asynchronous mode, on the contrary, asynchronous tasks are stored in a queue and multiple tasks can be executed together. The result is not returned immediately after the function is called. If the previous character needs to wait, the following tasks can be executed first and the callback can continue after the result of the previous task is returned:

setTimeout(function() {
    console.log('1');
}, 0);
setTimeout(function() {
    console.log('3');
}, 0);
console.log('2');
Copy the code
2
1
3
Copy the code

The code above is printed in the order 2,1,3. In the event loop, all synchronization tasks are recorded and executed in sequence. Asynchronous tasks are executed only after all synchronization tasks are executed.

The callback function

A function that is passed as an argument to another function and called inside that function to accomplish something is called a callback function.

function greeting(name) {
  alert('Hello ' + name);
}

function processUserInput(callback) {
  var name = prompt('name');
  callback(name);
}

processUserInput(greeting);
Copy the code

It is important to note, however, that callbacks are often used to continue an operation that has been done asynchronously. They are called asynchronous callbacks. Synchronous callbacks still block code execution, whereas asynchronous callbacks such as setTimeout wait until the synchronization task is complete. In a typical business, multiple asynchronous callbacks are used for data retrieval or processing. In this way, in order to wait for the completion of the asynchronous task, we need to perform the next operation in the callback function of the asynchronous task. If we need to process multiple asynchronous callback events, it will form a nested callback function, which is very inconvenient to read and develop. Such as:

function load() {
    $.ajax({
        url: 'xxx.com'.data: '123'.success: function(res) {
            init(res, function(res) {
                render(res, function(res) {
                    / /...
                });
            });
        }
    }
}

load();
Copy the code

To solve this problem, Generator and ES6Promise have been around for a long time in other languages. Generator is used to suspend the execution of functions and use yield to control the execution of functions, thus achieving asynchronous management functions. However, due to the complexity of writing, It has not been widely used. Until the Promise appeared, three states were proposed for the first time to manage the execution of the function, including Pending, fullfilled and Rejected, which made it more convenient to manage our code. In es7, according to the use of promise, syntactic candy of async and await were proposed, which are actually syntactic candy of Generator, through which we can get the effect of asynchronous code invocation in synchronous writing mode. The specific principle will be analyzed in the next article.