4 methods of Javascript asynchronous programming to help you write better programs_javascript skills

As you may know, the execution environment of the Javascript language is "single thread".
The so-called "single thread" means that only one task can be completed at a time. If there are multiple tasks, they must be queued. After the previous task is completed, the next task will be executed, and so on.

The advantage of this mode is that it is relatively simple to implement and the execution environment is relatively simple; the disadvantage is that as long as one task takes a long time, subsequent tasks must be queued up, which will delay the entire program. implement. Common browser unresponsiveness (suspended death) is often caused by a certain piece of Javascript code running for a long time (such as an infinite loop), causing the entire page to get stuck in this place and other tasks cannot be performed.

In order to solve this problem, the Javascript language divides the task execution mode into two types: Synchronous (Synchronous) and asynchronous (Asynchronous) .

"Synchronous mode" is the mode in the previous paragraph. The latter task waits for the previous task to end before executing it. The execution order of the program is consistent and synchronous with the order of tasks; "Asynchronous mode" is Completely different. Each task has one or more callback functions. After the previous task ends, the callback function is executed instead of the next task. The latter task is executed before the previous task ends, so The execution order of the program is inconsistent and asynchronous with the order of tasks.

"Asynchronous mode" is very important. On the browser side, long-running operations should be performed asynchronously to avoid the browser becoming unresponsive. The best example is Ajax operations. On the server side, "asynchronous mode" is even the only mode, because the execution environment is single-threaded, and if all http requests are allowed to be executed synchronously, the server performance will drop drastically and it will become unresponsive very quickly.

This article summarizes 4 methods of "asynchronous mode" programming. Understanding them will allow you to write Javascript programs with a more reasonable structure, better performance, and easier maintenance.

1. Callback function
This is the most basic method of asynchronous programming.
Suppose there are two functions f1 and f2, and the latter waits for the execution result of the former.

Copy code The code is as follows:

f1();
　f2();

If f1 is a time-consuming task, you can consider rewriting f1 and writing f2 as the callback function of f1.

Copy code The code is as follows:

function f1(callback){
setTimeout(function () {
　　　　 // f1’s task code
　　callback();
　　}, 1000);
　}

The execution code becomes as follows:

Copy code The code is as follows:

f1(f2);

In this way, we turn the synchronous operation into an asynchronous operation. F1 will not block the running of the program. It is equivalent to executing the main logic of the program first and postponing the execution of time-consuming operations.

The advantage of the callback function is that it is simple, easy to understand and deploy. The disadvantage is that it is not conducive to the reading and maintenance of the code. The various parts are highly coupled (Coupling), the process will be very confusing, and each task can only be specified A callback function.

2. Event monitoring
Another way of thinking is to use the event-driven model. The execution of a task does not depend on the order of the code, but on whether an event occurs.
Let’s take f1 and f2 as an example. First, bind an event to f1 (jQuery is used here).

Copy code The code is as follows:

f1.on('done', f2);

The above line of code means that when the done event occurs in f1, f2 will be executed. Then, rewrite f1:

Copy the code The code is as follows:

function f1(){
SetTimeout(function () {
// f1’s task code
f1.trigger('done');
}, 1000);
f1.trigger('done') means that after the execution is completed, the done event will be triggered immediately to start executing f2.
The advantage of this method is that it is relatively easy to understand, can bind multiple events, each event can specify multiple callback functions, and can be "decoupled", which is conducive to modularization. The disadvantage is that the entire program must become event-driven, and the running process will become very unclear.
3. Publish/Subscribe
The "event" in the previous section can be understood as a "signal".
We assume that there is a "signal center". When a certain task is executed, it "publish" a signal to the signal center. Other tasks can "subscribe" to the signal from the signal center to know what it is. You can start executing it yourself. This is called the "publish-subscribe pattern" (publish-subscribe pattern), also known as the "observer pattern" (observer pattern).

There are many implementations of this pattern. The one used below is Ben Alman’s Tiny Pub/Sub, which is a plug-in for jQuery.
First, f2 subscribes to the "done" signal from "Signal Center" jQuery.

Copy code The code is as follows:

jQuery.subscribe("done", f2);

Then, f1 is rewritten as follows:

Copy the code The code is as follows:

function f1(){
　setTimeout(function () {
　　　 // f1’s task code
　　jQuery.publish("done");


jQuery.publish("done") means that after the execution of f1 is completed, the "done" signal is released to the "signal center" jQuery, thereby triggering the execution of f2.

In addition, after f2 completes execution, you can also unsubscribe.

Copy code The code is as follows:

jQuery.unsubscribe("done", f2);

The nature of this method is similar to "event listening", but it is obviously better than the latter. Because we can monitor the operation of the program by looking at the "Message Center" to see how many signals exist and how many subscribers each signal has.

4. Promises object
The Promises object is a specification proposed by the CommonJS working group to provide a unified interface for asynchronous programming. Simply put, the idea is that each asynchronous task returns a Promise object, which has a then method that allows a callback function to be specified. For example, the callback function f2 of f1 can be written as:

Copy the code The code is as follows:

f1 ().then(f2);

f1 needs to be rewritten as follows (the jQuery implementation is used here):

Copy code The code is as follows:

function f1(){

　 var dfd = $.Deferred();
setTimeout(function () {
　　 / / f1’s task code
　　　dfd.resolve();
　　}, 500);
　　return dfd.promise; The function has become a chain writing method, the program flow can be seen clearly, and there is a complete set of supporting methods that can realize many powerful functions.

For example, specify multiple callback functions:

Copy the code

The code is as follows: f1().then(f2).then(f3); Another example, specify the callback function when an error occurs:

Copy code

The code is as follows: f1().then(f2).fail(f3); And, it There is another advantage that none of the previous three methods have: if a task has been completed and a callback function is added, the callback function will be executed immediately. So you don't have to worry about missing an event or signal. The disadvantage of this method is that it is relatively difficult to write and understand.