As you may know, the execution environment for a JavaScript language is "single-threaded" (single thread).
The so-called "single thread" means that only one task can be completed at a time. If you have more than one task, you must queue, the previous task completes, then the next task, and so on.
The advantage of this model is that it is simpler to implement and a relatively simple execution environment; The downside is that as long as one task takes a long time, the tasks that follow must be queued up, delaying the execution of the entire program. The common browser is unresponsive (suspended animation), often because a section of JavaScript code runs for a long time (such as a dead loop), causing the entire page to be stuck in this place, and other tasks cannot be performed.
To address this problem, the JavaScript language divides the execution pattern of a task into two different ways:
Synchronous (synchronous) and asynchronous (asynchronous)。
"Sync Mode" is the pattern of the previous paragraph, the latter task waits for the previous task to finish, then executes, the sequence of execution of the program is consistent with the order of the task, synchronized; "Asynchronous mode" is completely different, each task has one or more callback functions (callback), the previous task is finished, Instead of performing the latter task, the callback function is executed, and the latter task is executed at the end of the previous task, so that the sequence of execution of the program is inconsistent and asynchronous with the order in which the task is ordered.
"Asynchronous mode" is very important. At the browser end, a lengthy operation should be performed asynchronously to avoid the browser losing its response, the best example being Ajax. On the server side, "asynchronous mode" is even the only pattern, because the execution environment is single-threaded, and if all HTTP requests are allowed to execute synchronously, server performance can plummet and quickly lose its response.
This article summarizes the 4 methods of "Asynchronous mode" programming, and understands that they allow you to write JavaScript programs that are more structured, better performing, and easier to maintain.
one, callback function
This is the most basic method of asynchronous programming.
It is assumed that there are two functions F1 and F2, which wait for the results of the former's execution.
Copy Code code as follows:
If F1 is a time-consuming task, consider rewriting F1 to write F2 as a F1 callback function.
Copy Code code as follows:
Function F1 (callback) {
settimeout (function () {
F1 's Task code
Callback ();
}, 1000);
}
The execution code becomes the following:
Copy Code code as follows:
In this way, we turn the synchronization operation into an asynchronous operation, and F1 does not jam the program running, which is equivalent to executing the main logic of the program first, delaying the execution of the time-consuming operation.
The advantage of the callback function is simplicity, ease of understanding and deployment, which is not conducive to code reading and maintenance, is highly coupled between parts (coupling), the process is messy, and each task can only specify one callback function.
second, event monitoring
Another idea is to use event-driven mode. The execution of a task does not depend on the order of the Code, but on whether an event occurs.
Take F1 and F2 for example. First, bind an event to the F1 (the jquery notation used here).
Copy Code code as follows:
The above line of code means that when the F1 occurs, the F2 is executed. Then, rewrite the F1:
Copy Code code as follows:
Function F1 () {
settimeout (function () {
F1 's Task code
F1.trigger (' done ');
}, 1000);
}
F1.trigger (' Done ') indicates that after the execution is complete, the completed event is triggered immediately to begin execution of the F2.
The advantage of this approach is that it is relatively easy to understand, can bind multiple events, each event can specify multiple callback functions, and can be "decoupled" (decoupling), facilitate the implementation of modularity. The disadvantage is that the entire program becomes an event-driven type, and the running process becomes very unclear.
Third, publish/subscribe
The "events" in the previous section can be fully understood as "signals."
We assume that there is a "signal center" in which a task is executed to "release" a signal to the signal center, and other tasks can "subscribe" to the Signal Center (subscribe) to know when they can begin to perform publish. This is called "Publish/Subscribe Mode" (Publish-subscribe pattern), also known as "Observer Mode" (Observer patterns).
This pattern is implemented in a variety of ways, using the tiny pub/sub of Ben Alman, which is a plug-in to jquery.
First, F2 subscribe to "done" signals to the "Signal Center" jquery.
Copy Code code as follows:
Jquery.subscribe ("Done", F2);
The F1 is then rewritten as follows:
Copy Code code as follows:
Function F1 () {
settimeout (function () {
F1 's Task code
Jquery.publish ("Done");
}, 1000);
}
Jquery.publish ("done") means that after the execution of the F1, the "Do" signal is released to the "Signal Center" jquery, triggering F2 execution.
In addition, you can unsubscribe (unsubscribe) after F2 completes execution.
Copy Code code as follows:
Jquery.unsubscribe ("Done", F2);
The nature of this approach is similar to "event monitoring", but it is significantly better than the latter. Because we can monitor the operation of the program by looking at the message center to see how many signals there are and how many subscribers each signal has.
Iv. promises objects
The promises object is a specification proposed by the COMMONJS workgroup to provide a unified interface for asynchronous programming.
Simply put, it's thought that each asynchronous task returns a Promise object that has a then method that allows you to specify a callback function. For example, F1 's callback function, F2, can be written as:
Copy Code code as follows:
The F1 is rewritten as follows (the implementation of jquery is used here):
Copy Code code as follows:
Function F1 () {
var DFD = $. Deferred ();
settimeout (function () {
F1 's Task code
Dfd.resolve ();
}, 500);
return dfd.promise;
}
The advantage of this is that the callback function has become a chain of writing, the process of the program can be seen very clearly, and a complete set of matching methods, can achieve many powerful functions.
For example, specify multiple callback functions:
Copy Code code as follows:
F1 (). Then (F2). then (F3);
For example, specify the callback function when an error occurs:
Copy Code code as follows:
F1 (). Then (F2). Fail (F3);
Moreover, it has a benefit that none of the previous three methods do: If a task is completed, and then a callback function is added, the callback function is executed immediately. So you don't have to worry about missing an event or signal. The disadvantage of this method is that it is comparatively difficult to write and understand.
