4 methods of asynchronous programming in javascript

Four methods of asynchronous programming in JavaScript: 1. Callback function, which is the most basic method of asynchronous programming; 2. Event listening, using event-driven mode; 3. Publish/subscribe; 4. Promises object, which Asynchronous programming provides a unified interface.

The operating environment of this article: Windows 7 system, javascript version 1.8.5, DELL G3 computer

Four methods of JS asynchronous programming

1. Callback function, which is the most basic method of asynchronous programming

Assume that there are two functions f1 and f2, and the latter waits for the execution result of the former. If f1 is a time-consuming task, you can consider rewriting f1 and writing f2 as the callback function of f1.

function f1(callback){
 
　　setTimeout(function () {
 
　　    // f1的任务代码
 
　　　　callback();
 
　　}, 1000);
}

Using this method, 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 event-driven mode. The execution of a task does not depend on the order of the code, but on whether an event occurs.

f1.on('done', f2); When the done event occurs in f1, f2 is executed.

function f1(){
 
　　setTimeout(function () {
 
　　　　// f1的任务代码
　　　　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, it can bind multiple events, each event can specify multiple callback functions, and it can be "decoupled" (Decoupling). Conducive to achieving modularity. The disadvantage is that the entire program has to become event-driven, and the running process will become very unclear.

[Recommended learning: js basic tutorial]

3. Publish/Subscribe

We assume that there is a "signal" Center", when a task is completed, it will "publish" a signal to the signal center. Other tasks can "subscribe" to the signal to the signal center to know when they can start execution. This is called the "publish-subscribe pattern" (publish-subscribe pattern), also known as the "observer pattern" (observer pattern). 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.

jQuery.subscribe("done", f2); //首先，f2向"信号中心"jQuery订阅"done"信号。
function f1(){
 
　　setTimeout(function () {
 
　　　　// f1的任务代码
 
　　　　jQuery.publish("done"); //f1执行完成后，向"信号中心"jQuery发布"done"信号，引发f2的执行。
 
　　}, 1000);
 
　　}
 
jQuery.unsubscribe("done", f2); //f2完成执行后，也可以取消订阅（unsubscribe）。

4. Promises object

The Promises object is a specification proposed by the CommonJS working group for the purpose of Asynchronous programming provides a unified interface. 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.

f1().then(f2);
 
function f1(){
 
　　var dfd = $.Deferred();
 
　　setTimeout(function () {
 
　　　　// f1的任务代码
 
　　　　dfd.resolve();
 
　　}, 500);
 
　　return dfd.promise;
 
}

The callback function has been written in a chain style. The process of the program can be seen clearly, and there is a complete set of supporting methods that can realize many powerful functions.

f1().then(f2).then(f3); //指定多个回调函数
f1().then(f2).fail(f3); //指定发生错误时的回调函数

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.

The above is the detailed content of 4 methods of asynchronous programming in javascript. For more information, please follow other related articles on the PHP Chinese website!