Methods to realize asynchrony

The way to achieve asynchrony

One 、 Callback function

A callback is a function that is passed as an argument to another function , Do not execute until that function is finished .（ That is to say ：B The function is passed as an argument to A In the function , stay A After the function is executed, execute B ）
Callback function is the most basic method of asynchronous programming , Callbacks are not necessarily asynchronous
principle ： Use the working principle of the timer to f1 Put it into the event queue to execute , Even if the delay is 0, So it is with , Therefore, the program is not blocked . Here you can master the working principle of the timer .
Suppose there are two functions f1 and f2, The latter waits for the execution result of the former .

advantage ： Simple , Easy to understand and deploy .
shortcoming ： Not conducive to the reading and maintenance of the code , The parts are highly coupled , The process is chaotic , And each task can only specify one callback function .

f1();
f2();

// If f1 It's a time-consuming task , Consider rewriting f1, hold f2 It's written in f1 Callback function for .
function f1(callback){
    
    setTimeout(function () {
    
        // f1 The task code of 
        callback();
    }, 1000);
}

// Executing the code will look like this ：
f1(f2);

Two 、 Event monitoring

Another idea is to use event driven mode . Task execution does not depend on the order of the code , It depends on whether an event happens .

principle ： Make use of the principle of timer to f1 Put it in the event queue , When it's all done , Will execute the methods in the event queue .
Or to f1 and f2 For example . First , by f1 Bind an event （ Here we use jQuery Writing ）.

advantage ： Easier to understand , Multiple events can be bound , Each event can specify multiple callback functions , And it can “ Decouple ”, It's good for modularity .
shortcoming ： The whole program should be event driven , The running process will become very unclear .

f1.on('done', f2);
// The above line of code means , When f1 happen done event , Is executed f2. then , Yes f1 To rewrite ：

function f1(){
    
    setTimeout(function () {
    
        // f1 The task code of 
        f1.trigger('done');
    }, 1000);
}

f1.trigger(‘done’) Express , After execution , Immediately triggered done event , So we can start to execute f2.

3、 ... and 、Promise object

Promise The object is CommonJS A specification proposed by the working group , The purpose is to provide a unified interface idea for asynchronous programming , Each asynchronous task returns one Promise object , The object has one then Method , Allows you to specify callback functions .
such as ,f1 Callback function for f2, It can be written. ：f1().then(f2);

advantage ： Callbacks become chained , The process of the program can be seen clearly , And there's a whole set of matching methods , Many powerful functions can be realized .
shortcoming ： Write and understand , It's relatively difficult .

function f1(){
    
    var dfd = $.Deferred();
    setTimeout(function () {
    
        // f1 The task code of 
        dfd.resolve();
    }, 500);
    return dfd.promise;
}