Home > Web Front-end > JS Tutorial > body text

What are the asynchronous programming methods in javascript?

清浅
Release: 2019-04-19 13:07:41
Original
3165 people have browsed it

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.

What are the asynchronous programming methods in javascript?

【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();
Copy after login

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);
}
Copy after login

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);
Copy after login

Then write f1 as

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

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);
Copy after login

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);
Copy after login

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);
}
Copy after login

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)
Copy after login

f1 should be written as:

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

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);
Copy after login

Another example, if there is an error:

f1().then(f2).fail(f3);
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template