What are the asynchronous programming methods in javascript?

Methods for implementing asynchronous programming in JavaScript include: callback methods that are easy to understand and implement but difficult to maintain code, publish/subscribe methods, event listening methods that are easy to understand and can bind multiple events but have confusing workflow, and Promises methods

Asynchronous mode is very important, long-running operations on the browser side should be executed asynchronously to avoid unresponsiveness. Next, I will introduce the implementation of asynchronous programming methods in JavaScript in detail in the article. It has a certain reference effect and I hope it will be helpful to everyone.

【Recommended course: JavaScript Tutorial】

Everyone knows that the execution environment of JavaScript is single-threaded. Single-threading means that only one task can be run at any time. If you encounter multiple tasks, you need to wait in the queue for the completion of the previous task. Therefore, it takes a lot of time. The synchronous mode is similar to this single-threaded mode. The asynchronous mode is completely different. Each task has a callback function. When a task is completed, it will execute the callback function, and subsequent tasks can be The previous task runs simultaneously. The execution order of tasks is different from the sequence of tasks in the queue.

Method 1: Callback method

This method is the basic method of asynchronous programming. Suppose there are two functions f1 and f2, the latter will wait for the first function result.

F1（）; 
F2（）;

If f1 is a long-running operation, you can override f1 and use f2 as the callback function of f1.

function f1(callback){
setTimeout(function () {
 callback();
    }, 1000);
}

Using this mode, synchronous operations can be converted into asynchronous operations. f1 will not prevent program execution. It will execute the main logic first and then perform time-consuming operations.

The callback function The advantage is that it is easy to understand and implement, but the disadvantage is that the code is unreadable and maintainable, different components are highly coupled, the workflow is very confusing, and each task can only have one callback function.

Method 2: Publish/Subscribe

This event can be understood as a signal. Assuming there is a signal center, if a task is completed, it will publish a signal to the signal center, and other Tasks can receive specified signals from subscribed signal centers. This approach is called the publish/subscribe pattern or the observer pattern.

Example: f2 subscribes to the signal center to complete the signal

jQuery.subscribe（“done”，f2）;

Then write f1 as

function f1(){
    setTimeout(function () {
     jQuery.publish("done");
    }, 1000);
}

jQuery.publish("done") means when f1 When it completes execution it will send a completion signal to the signal center and then f2 will start execution.

When f2 completes execution, it can unsubscribe.

jQuery.unsubscribe（“done”，f2）;

Method Three: Event Listening

Another method is the event-driven model. The execution of a task does not depend on the code sequence. They wait for an event to occur. Still using f1 and f2 in this example, first bind an event to f1.

f1.on（'done'，f2）;

The meaning of the above code is that if the f1 completion event occurs, f2 will be executed.

function f1(){
    setTimeout(function () {
      f1.trigger('done');
    }, 1000);
}

f1.trigger('done') means it will trigger the done event and then execute f2 when the execution is complete.

The advantage is that it is easy to understand and can bind multiple events, each event can have many callback functions, and it can decouple which is beneficial to modularity. The disadvantage is that the entire program will be event-driven and the workflow is not very clear.

Method 4: Promises method

The Promises object is a standard proposed by CommonJS to provide a common interface for asynchronous programming. Each asynchronous task returns a Promises object, which has a then method that allows setting a callback function. For example, the callback function f2 of f1:

F1（）.then（F2）

f1 should be written as:

function f1(){
    var dfd = $.Deferred();
    setTimeout(function () {
        dfd.resolve();
    }, 500);
    return dfd.promise;
}

The advantage is that the callback functions are linked, the workflow of the program is very clear, and it has a set Complete linking methods that can be used to implement powerful functionality.

For example, setting up multiple callback functions:

f1().then(f2).then(f3);

Another example, if there is an error:

f1().then(f2).fail(f3);

One advantage that the other three methods do not have is that once one is completed Task, if you add more callback functions, they will be executed immediately. The disadvantage is that it is not easy to understand.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone.

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