Deferred (deferred) commitment (promise)--JQ an analysis of asynchronous programming

Introduction

I believe you developers to JS in the asynchronous concept is not unfamiliar, the logic of the asynchronous operation is executed by the callback function, the callback function (callback functions) as the name implies "Call back function", the function body has been defined in advance, at some point in the future by an event trigger call , and the timing is beyond the control of the program itself.

To cite a few common examples:

• Event Bindings

• Animation

• Ajax

The examples above are simple, typical, easy to read and understand.

To elicit the topic of this article, assume that there are now 3 Ajax asynchronous operations, a, B, C, each encapsulated as a function, and can pass in the success callback as a parameter.

Consider the following scenario:

1. It is hoped that these 3 asynchronous operations will be executed sequentially, forming the execution queue, that is, a executes, b executes; b executes, C executes;

2. Hope a A, B is completed, and then execute C;

For the scenario (1), the code would probably be:

According to the traditional way of writing, will naturally form a multi-layered callback function nested, if the amount of code is more, the code readability and maintenance will be poor.

For scenarios (2), the code may be more complex:

• A) A, B operations need to have a state variable, isADone isBDone The default value is false ; A succeeds isADone true , and B succeeds isBDone true ;

• b) need a piece of code to repeatedly detect the above 2 state variables, we call this behavior pending, and so on pending to 2 states are true executed C, and terminate pending;

In this scenario, the above scenario can be reluctantly accepted, and if the situation is more complicated, the readability and maintainability of the code will be greatly compromised.

The above 2 scenarios, only limited the execution of 3 asynchronous operations, the actual development scenario may be more complex than this, for developers to more gracefully handle the JS asynchronous operation, JQ introduced the Deferred object ( $.Deferred ), we first to understand the next Deferred object, Then see what benefits it can bring to our asynchronous programming.

Deferred feature introduction

Create an Deferred instance first.

newThe keyword is optional and can not be written, because it is handled in the Deferred constructor, but does not mean that the object is created with the native JS based constructor without writing new .

Deferred comes in 3 states: Pending (TBD), Resolved (success), Rejected (failed).

The state of the deferred can be switched through the API, but not reversible.

Can be understood from the English literal meaning: Resolve (resolved) after success, reject (rejected) after the failure.

State irreversible means that once you switch from the pending state to any of the determined States, the call again resolve or reject the original state will not have any effect.

deferredA callback function that executes when a different state is bound by a semantic corresponding API.

Resolve: Done , always

reject: fail, always

Where the always bound callback function, regardless deferred of the state of success or failure, is always executed.

deferredThere is one more then way to simplify and to do this done fail :

In addition, it is worth noting that when the deferred state is switched (called reject or resolve later), and then the callback function is bound, then the corresponding state of the callback function will be executed immediately.

As an example:

Deferred can also return its own subset of operations.

promiseThere is only one API that binds the callback, and no stateful switching API.

deferred: reject, resolve, done, fail, then, always

Promise: Done , fail, then, always

is obviously promise used to open to external calls, and is deferred usually used inside the module to control the switching of its own state.

For example, in JS we will use setTimeout to do time-delay execution, such as:

We use it deferred to encapsulate the code as follows:

waitInside the function, a deferred state switch is made to return the promise object so that the wait callback function can be bound externally.

In fact, the principle in JQ has a very typical case, that is $.ajax , the method, the method will return one promise , and the method inside a deferred decision to determine their own state, so the relative traditional Ajax notation, we can also write:

Among them done , the fail method can also accept multiple callback, or the callback array as the parameter.

Assuming that there is an AJAX request, after the success of the return to the results of 3 independent processing, corresponding to 3 functions, we can write:

In this way, the logic of acquiring data and the logic of processing data are separated, the data processing is not all piled up in the success callback function, the code overall looks more concise and readable.

Back to the previous question

DeferredOnce we understand the features and the simple application, we look back at the 2 scenarios mentioned earlier, can we implement them in a better scheme? The answer is yes.

Let's look at the scene first (2): A, B is done, then C is executed.

Why look at the scene first (2), because there is a ready-made API in JQ: It $.when is easy to meet this requirement.

$.whencan accept multiple deferred(promise) objects, $.when return a promise, used as a binding for subsequent callbacks, the official website example is as follows:

When $.when 2 asynchronous requests are returned successfully, the MyFunc callback is executed;

$.whenThe myfailure callback is executed whenever an asynchronous request fails;

The solution is already clear, we have to modify the previous asyncA asyncB method, let them return to their respective promise , and then directly use $.when .

I can use Ajax to do code examples first:

Here deferred 's another example of a code that is directly used:

On the whole, do you feel that the code is clearer and more understandable?

Let's take a look at the scene (1): A is finished, b executes; B is finished, C executes.

To complete this implementation transformation, you need to understand the deferred methods of the object in depth then . The general usage that we introduced above then :

done fail a simplified notation for. But it also has a very important role that can be used to pass deferred(promise) objects and implement the "Task Chain" (Chain tasks).

The following is used then to implement the scenario (1) Requirements:

It feels very simple, if there is D behind C, then continue down then .

asyncAit is assumed to be an AJAX operation in which the callback function data parameter, that is, after the successful Ajax, back to the back of the database.

It is important to note that if the then object is passed with deferred a method, the callback function must return one deferred .

The above example also has a feature: Because then the first parameter is the deferred callback that executes when the object succeeds, if the deferred state switches to failure, subsequent then successful callbacks are no longer executed, and the "task chain" is interrupted.

This scenario has some practical value, such as a business site, a number of display modules on the page is through the Ajax ask the background to take data, if the page comes in, while the background to send several AJAX requests, will instantly increase the pressure of the background Io, may increase the user waiting for the interface feedback data time, resulting in experience decline. In this case, it is more appropriate to treat the AJAX request as a queue, and to request the data incrementally as important, improving the performance and rendering experience.

Summary

This article is only a preliminary introduction of the next JQ Deferred , and did not go into every detail, but its basic skills should be covered to, interested students can go to the JQ official website, self-study.

In fact, promise it can be literally understood as a "commitment," can be deferred understood as one of your subordinates, you ask him to follow up a matter, and when this thing can have a result, you do not know, but he will give you a promise, will follow your intentions: if things like this, follow up what to do; What to do next.

Deferred (deferred) commitment (promise)--JQ an analysis of asynchronous programming