Jquery->deferred Then

Source: Internet
Author: User

What skills should a qualified project manager have?

Oh, I don't know! But I know what the unqualified project manager has.

1. Do not look at the code

2. Mediocrity and excellence are not recognized

3. Expediting progress

1. Then what is the return value? var a = Adeferred.then (), what is the relationship between A and adeferred?

Then the return value is a promise, which is the deferred object without triggering function (resolve,reject,notify)
A and adeferred are not related, A is the newly generated promise.

2. $. What do you mean by Deferred (FN)?

$. Deferred (FN) is equivalent to:
var t = $. Deferred (); Fn.call (T, T);
That is, in the scope of T, the function FN is called with the T parameter.

3. var t = $. Deferred (). then (); What is the relationship between T and the Newdefer parameter in the then function in the following code?

Properties in Newdefer Copy from T,t is a subset of Newdefer

?
1 2 3 4 5 then: function () {      var fns = arguments;      return jquery.deferred ( function (Newdefer) {...      }  



4 Where does tuples come from? Who is deferred referring to?

Assuming that T.then () is called, tuples is produced when T is generated, deferred similarly

Thenfunction(/*Fndone, Fnfail, fnprogress*/ ) {        varFNS =arguments; returnJquery.deferred (function(Newdefer) {Jquery.each ( tuples,function(i, tuple) {varAction = tuple[0], FN= Jquery.isfunction (fns[i]) &&fns[i]; //deferred[Done | fail | progress] for forwarding actions to Newdefer                deferred[Tuple[1]] (function() {                    varreturned = FN && fn.apply ( This, arguments); if(Returned &&jquery.isfunction (returned.promise))                            {returned.promise (). Done (Newdefer.resolve)                    . Fail (Newdefer.reject). Progress (newdefer.notify); } Else{newdefer[Action+ "with"] ( This= = = Promise? Newdefer.promise (): ThisFn?[returned]: arguments);            }                });            }); FNS=NULL;    }). Promise (); }


5.$.each (arr, FN); Who is the this object in the function fn?

A scoped binding of the call to FN in Arr[i],$.each

function (obj, callback, args) {    ...      Else {         if  (isarray) {             for (; i < length; i++ ) {                  = CA Llback.call (obj[i], I, obj[i]);                 ...             }        }    }     return obj;}

6. deferred[tuple[1]] (FN) What are you doing?

Add FN to the list of deferred callback functions so that deferred.resolve/reject () is triggered after the callback FN

7. What does Jquery.isfunction (returned.promise) mean?

Determines whether returned is at least a promise object.

8. Returned.promise (). What is done (newdefer.resolve) doing?

Add a callback function for returned to complete, so that returned.resolve () executes the newdefer.resolve ()

9 fn is a function,
Jquery.isfunction (FN (). promise) = = = FALSE;
$. Deferred (). Done (FN) with $. What is the difference between Deferred (). Then (FN)?

$. Deferred (). Then (FN) is missing the callback function binding, which makes no difference, which at the end triggers the Resolvewith method of the newly generated Deferred object.

The difference between ten then and pipe

The functionality of the pipe in earlier versions of JQuery was consistent with the current (jquery1.10.1) then, and now the pipe is then the alias, considering backwards compatibility

Practical use of 11.then [1]

In the above case, the call of the done and then mode is almost indistinguishable
Look at the following scenario, the AJAX request, and the returned data is used to modify the value of the page.

$.ajax ("Your/url", {    "json"}). Done (    function(data) {          function(key, value) {    $ ("#" + key). val (value);    });

Now suppose value is not the final value to show, it needs to be converted to value, value = Dosomethingwith (value), and if Dosomethingwith contains an asynchronous operation, how do you ensure that the correct results are displayed after the asynchronous operation?

At this point, then, the first Ajax, called Ajax1, after the response is complete, the process goes to Then,then to return the Ajax (deferred object) Ajax2, and finally, the AJAX2 call completes the function queue that triggered resolve to execute the done add, and the results are displayed.

    $.ajax ("Your/url", {        "json"    }). Then (function(theoriginaldata) {         return $.ajax ("Your/web/service/dosomethingwith", {            data:theoriginaldata,            "JSON"         });    }). Done (function(thefinaldata) {        function(key, value) {            $ ( "#" + key). val (value);        })     ;

12 How is data passed between asynchronous operations?

As shown in the above example, after the AJAX1 processing succeeds, the Resolvewith trigger callback function queue is called

Deferred.resolvewith (Callbackcontext, [Theoriginaldata, StatusText, JQXHR]); -      (function() {        varreturned = FN && fn.apply ( This, arguments); if(Returned &&jquery.isfunction (returned.promise))                {returned.promise (). Done (Newdefer.resolve). Fail (Newdefer.reject)        . Progress (Newdefer.notify); } Else{newdefer[Action+ "with"] ( This= = = Promise? Newdefer.promise (): ThisFn?[returned]: arguments); }). Apply (Callbackcontext, [Theoriginaldata, StatusText, JQXHR]);  -fn.apply ( This, arguments) - //Trigger another        (function(theoriginaldata) {return$.ajax ("Your/web/service/dosomethingwith", {data:theoriginaldata, DataType:"JSON"        }); }). Apply (Callbackcontext, [Theoriginaldata, StatusText, jqxhr]); -$.ajax ("Your/web/service/dosomethingwith", {data:theoriginaldata, DataType:"JSON"    });  - //after the asynchronous operation is completeDeferred.resolvewith (Callbackcontext, [Thefinaldata, StatusText, jqxhr]); -Newdefer.resolve (Callbackcontext, [Thefinaldata, StatusText, jqxhr]); -        (function(thefinaldata) {$.each (Thefinaldata,function(key, value) {$ ("#" +key). val (value);    }); }). Apply (Callbackcontext, [Thefinaldata, StatusText, JQXHR]); 


[1] Code Source: Understanding-deferred-pipe

[2] rules for determining the value of this in the context of a function

The value of this is provided by the caller and is determined by the way the function is called, if the calling bracket () to the left is a reference type, this is the base object of the reference type value, and the other case of this is the global object

functionfoo () {Console.log ( This);} Foo (); //Global, becausevarFooreference ={base:global, PropertyName:' Foo '};//another form of invocationFoo.prototype.constructor ();//Foo.prototype, becausevarFooprototypeconstructorreference ={base:foo.prototype, PropertyName:' Constructor '}; Consider the following function expression: (function() {Console.log ( This);//NULL = Global})();functionFoo () {//explain http://dmitrysoshnikov.com/ecmascript/chapter-3-this/#comment -342    functionBar () {Console.log ( This);//= Global} bar ();}

[3] Source 1.10.1

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.