深入学习jquery源码之Deferred对象与holdReady()

深入学习jquery源码之Deferred对象与holdReady()

jQuery的Deferred对象也有resolve、reject、then方法，还有done、fail、always......方法。jQuery就是用这个Deferred对象来注册异步操作的回调函数，修改并传递异步操作的状态。

<script>
    var defer = $.Deferred();
    console.log(defer);
</script>

一直用的jquery的ajax

          $.ajax({
                  url: 'abc.com',
                  type: 'post',
                  data: { abc:1 },
                  success: function (data) {
                      if (!data.success) {
                          alert(data.message);
                      } else {
  
                     }
                 }
             });

Deferred对象的reject方法会回调所有的 fail 方法，resolve 会回调所有的 done方法

   $.ajax({
       url: 'abc.com/index',
       type: 'post',
       data: { abc:1 },
  }).done(function(data) {
      if (!data.success) {
           alert(data.message);    
       } else {
       }
  }).fail(function() {
      alert('请稍后重试');
  });

  function test(txt) {
      var dtd = $.Deferred();
      if (!txt.trim()) {
          dtd.reject({ msg: '不能为空' });
      } else if (!reg.test(txt)) {
          dtd.reject({ msg: '含有非法字符' });
      } else if (this.tags.indexOf(txt)>=0) {
          dtd.reject({ msg: '已重复' });
      }
　　　dtd.resolve();
     return dtd.promise();
 }
 
 调用：
     test('xxx')
     .done(function(data){  
      //xxxxxx
     })
     .fail(function(data){ 
       //xxxx
     })

Deferred对象的实例defer通过resolve方法把参数 “异步请求成功之后返回的数据” 传回到then方法中进行接收，，打印。

    function runAsync(){
        var defer = $.Deferred();
        //做一些异步操作
        setTimeout(function(){
            console.log('执行完成');
            defer.resolve('异步请求成功之后返回的数据');
        }, 1000);
        return defer;
    }
    runAsync().then(function(data){
        console.log(data)
    });

和ES6的Promise区别

    function runAsync(){
        var p = new Promise(function(resolve, reject){
           
            setTimeout(function(){
                console.log('执行完成');
                resolve('异步请求成功之后返回的数据');
            }, 1000);
        });
        return p;            
    }

    runAsync().then(function(data){
        console.log(data);
    });

1、创建Deferred对象的时候没有传参；而创建Promise对象的时候，传了参数（传了一个匿名函数，函数也有两个参数：resolve、reject）；

2、Deferred对象直接调用了resolve方法；而Promise对象则是在内部调用的resolve方法；

说明：Deferred对象本身就有resolve方法，而Promise对象是在构造器中通过执行resolve方法，给Promise对象赋上了执行结果的状态。

这样就有一个弊端：因为Deferred对象自带resolve方法，拿到Deferred对象之后，就可以随时调用resolve方法，其状态可以进行手动干预了

直接在外部直接给Deferred设置了状态，打印“在外部结束”，1s后打印“执行完成”，不会打印“异步请求成功之后返回的数据”了。

显然，这不好。我发个异步请求，还没收到数据就让人在外部给我结束了。。。。。。。

    function runAsync(){
        var defer = $.Deferred();
        //做一些异步操作
        setTimeout(function(){
            console.log('执行完成');
            defer.resolve('异步请求成功之后返回的数据');
        }, 1000);
        return defer;
    }
　　 var der = runAsync();
　 　der.then(function(data){
        console.log(data)
　 　});
 　　der.resolve('在外部结束'); 

Deferred对象上有一个promise方法，是一个受限的Deferred对象

所谓受限的Deferred对象，就是没有resolve和reject方法的Deferred对象。这样就无法在外边改变Deferred对象的状态了。

    function runAsync(){
        var def = $.Deferred();
        //做一些异步操作
        setTimeout(function(){
            console.log('执行完成');
            def.resolve('请求成功之后返回的数据');
        }, 2000);
        return def.promise(); //就在这里调用
    }

Deferred对象的then方法和done、fail语法糖

我们知道，在ES6的Promise规范中，then方法接受两个参数，分别是执行完成和执行失败的回调，而jquery中进行了增强，还可以接受第三个参数，就是在pending状态时的回调，如下：

deferred.then( doneFilter [, failFilter ] [, progressFilter ] )

Deferred对象的then方法也是可以进行链式操作的。

    function runAsync(){
        var def = $.Deferred();
        //做一些异步操作
        setTimeout(function(){
              var num = Math.ceil(Math.random()*10); //生成1-10的随机数
               if(num<=5){
                   def.resolve(num);
               }
               else{
                   def.reject('数字太大了');
               }
        }, 2000);
        return def.promise(); //就在这里调用
    }

    runAsync().then(function(d){
        console.log("resolve");
        console.log(d);
    },function(d){
        console.log("reject");
        console.log(d);
    })

done，fail语法糖,分别用来指定执行完成和执行失败的回调,与这段代码是等价的：

    function runAsync(){
        var def = $.Deferred();
        //做一些异步操作
        setTimeout(function(){
              var num = Math.ceil(Math.random()*10); //生成1-10的随机数
               if(num<=5){
                   def.resolve(num);
               }
               else{
                   def.reject('数字太大了');
               }
        }, 2000);
        return def.promise(); //就在这里调用
    }

    runAsync().done(function(d){
        console.log("resolve");
        console.log(d);
    }).fail(function(d){
        console.log("reject");
        console.log(d);
    })

always的用法

jquery的Deferred对象上还有一个always方法，不论执行完成还是执行失败，always都会执行，有点类似ajax中的complete。

$.when的用法

jquery中，还有一个$.when方法来实现Promise，与ES6中的all方法功能一样，并行执行异步操作，在所有的异步操作执行完后才执行回调函数。不过$.when并没有定义在$.Deferred中，看名字就知道，$.when，它是一个单独的方法。与ES6的all的参数稍有区别，它接受的并不是数组，而是多个Deferred对象，如下：

 function runAsync(){
        var def = $.Deferred();
        //做一些异步操作
        setTimeout(function(){
              var num = Math.ceil(Math.random()*10); //生成1-10的随机数
              def.resolve(num);   
        }, 2000);
        return def.promise(); //就在这里调用
    }
    $.when(runAsync(), runAsync(), runAsync()) .then(function(data1, data2, data3){
　　　　 console.log('全部执行完成');
　　　　 console.log(data1, data2, data3);
　　});

都是用一次性定时器来代替了异步请求进行数据处理。为什么没用ajax呢，不是因为麻烦，在这里要说一下ajax和Deferred的联系：

jquery的ajax返回一个受限的Deferred对象，也就是没有resolve方法和reject方法，不能从外部改变状态，既然是Deferred对象，那么我们上面讲到的所有特性，ajax也都是可以用的。比如链式调用，连续发送多个请求：

req1 = function(){
    return $.ajax(/* **** */);
}
req2 = function(){
    return $.ajax(/* **** */);
}
req3 = function(){ 
　　return $.ajax(/* **** */);
}
req1().then(req2).then(req3).done(function(){ console.log('请求发送完毕'); });

success、error与complete

这三个方法是我们常用的ajax语法糖。

$.ajax(/*...*/)
.success(function(){/*...*/})
.error(function(){/*...*/})
.complete(function(){/*...*/})

有时候比较喜欢在内部作为属性来处理。

分别表示ajax请求成功、失败、结束的回调。这三个方法与Deferred又是什么关系呢？其实就是语法糖，success对应done，error对应fail，complete对应always，就这样，只是为了与ajax的参数名字上保持一致而已。

总结：

$.Deferred实现了Promise规范，then、done、fail、always是Deferred对象的方法。$.when是一个全局的方法，用来并行运行多个异步任务，与ES6的all是一个功能。ajax返回一个受限的Deferred对象，success、error、complete是ajax提供的语法糖，功能与Deferred对象的done、fail、always一致。

 

jquery源码

    // The deferred used on DOM ready
    var readyList;

    jQuery.fn.ready = function (fn) {
        // Add the callback
        jQuery.ready.promise().done(fn);

        return this;
    };

    jQuery.extend({
        // Is the DOM ready to be used? Set to true once it occurs.
        isReady: false,

        // A counter to track how many items to wait for before
        // the ready event fires. See #6781
        readyWait: 1,

        // Hold (or release) the ready event
        holdReady: function (hold) {
            if (hold) {
                jQuery.readyWait++;
            } else {
                jQuery.ready(true);
            }
        },

        // Handle when the DOM is ready
        ready: function (wait) {

            // Abort if there are pending holds or we're already ready
            if (wait === true ? --jQuery.readyWait : jQuery.isReady) {
                return;
            }

            // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
            if (!document.body) {
                return setTimeout(jQuery.ready);
            }

            // Remember that the DOM is ready
            jQuery.isReady = true;

            // If a normal DOM Ready event fired, decrement, and wait if need be
            if (wait !== true && --jQuery.readyWait > 0) {
                return;
            }

            // If there are functions bound, to execute
            readyList.resolveWith(document, [jQuery]);

            // Trigger any bound ready events
            if (jQuery.fn.triggerHandler) {
                jQuery(document).triggerHandler("ready");
                jQuery(document).off("ready");
            }
        }
    });

    /**
     * Clean-up method for dom ready events
     */
    function detach() {
        if (document.addEventListener) {
            document.removeEventListener("DOMContentLoaded", completed, false);
            window.removeEventListener("load", completed, false);

        } else {
            document.detachEvent("onreadystatechange", completed);
            window.detachEvent("onload", completed);
        }
    }

    /**
     * The ready event handler and self cleanup method
     */
    function completed() {
        // readyState === "complete" is good enough for us to call the dom ready in oldIE
        if (document.addEventListener || event.type === "load" || document.readyState === "complete") {
            detach();
            jQuery.ready();
        }
    }

    jQuery.ready.promise = function (obj) {
        if (!readyList) {

            readyList = jQuery.Deferred();

            // Catch cases where $(document).ready() is called after the browser event has already occurred.
            // we once tried to use readyState "interactive" here, but it caused issues like the one
            // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
            if (document.readyState === "complete") {
                // Handle it asynchronously to allow scripts the opportunity to delay ready
                setTimeout(jQuery.ready);

                // Standards-based browsers support DOMContentLoaded
            } else if (document.addEventListener) {
                // Use the handy event callback
                document.addEventListener("DOMContentLoaded", completed, false);

                // A fallback to window.onload, that will always work
                window.addEventListener("load", completed, false);

                // If IE event model is used
            } else {
                // Ensure firing before onload, maybe late but safe also for iframes
                document.attachEvent("onreadystatechange", completed);

                // A fallback to window.onload, that will always work
                window.attachEvent("onload", completed);

                // If IE and not a frame
                // continually check to see if the document is ready
                var top = false;

                try {
                    top = window.frameElement == null && document.documentElement;
                } catch (e) { }

                if (top && top.doScroll) {
                    (function doScrollCheck() {
                        if (!jQuery.isReady) {

                            try {
                                // Use the trick by Diego Perini
                                // http://javascript.nwbox.com/IEContentLoaded/
                                top.doScroll("left");
                            } catch (e) {
                                return setTimeout(doScrollCheck, 50);
                            }

                            // detach all dom ready events
                            detach();

                            // and execute any waiting functions
                            jQuery.ready();
                        }
                    })();
                }
            }
        }
        return readyList.promise(obj);
    };
	

	    jQuery.extend({
        Deferred: function (func) {
            var tuples = [
                    // action, add listener, listener list, final state
                    ["resolve", "done", jQuery.Callbacks("once memory"), "resolved"],
                    ["reject", "fail", jQuery.Callbacks("once memory"), "rejected"],
                    ["notify", "progress", jQuery.Callbacks("memory")]
                ],
                state = "pending",
                promise = {
                    state: function () {
                        return state;
                    },
                    always: function () {
                        deferred.done(arguments).fail(arguments);
                        return this;
                    },
                    then: function ( /* fnDone, fnFail, fnProgress */) {
                        var fns = arguments;
                        return jQuery.Deferred(function (newDefer) {
                            jQuery.each(tuples, function (i, tuple) {
                                var fn = jQuery.isFunction(fns[i]) && fns[i];
                                // deferred[ done | fail | progress ] for forwarding actions to newDefer
                                deferred[tuple[1]](function () {
                                    var returned = fn && fn.apply(this, arguments);
                                    if (returned && jQuery.isFunction(returned.promise)) {
                                        returned.promise()
                                            .done(newDefer.resolve)
                                            .fail(newDefer.reject)
                                            .progress(newDefer.notify);
                                    } else {
                                        newDefer[tuple[0] + "With"](this === promise ? newDefer.promise() : this, fn ? [returned] : arguments);
                                    }
                                });
                            });
                            fns = null;
                        }).promise();
                    },
                    // Get a promise for this deferred
                    // If obj is provided, the promise aspect is added to the object
                    promise: function (obj) {
                        return obj != null ? jQuery.extend(obj, promise) : promise;
                    }
                },
                deferred = {};

            // Keep pipe for back-compat
            promise.pipe = promise.then;

            // Add list-specific methods
            jQuery.each(tuples, function (i, tuple) {
                var list = tuple[2],
                    stateString = tuple[3];

                // promise[ done | fail | progress ] = list.add
                promise[tuple[1]] = list.add;

                // Handle state
                if (stateString) {
                    list.add(function () {
                        // state = [ resolved | rejected ]
                        state = stateString;

                        // [ reject_list | resolve_list ].disable; progress_list.lock
                    }, tuples[i ^ 1][2].disable, tuples[2][2].lock);
                }

                // deferred[ resolve | reject | notify ]
                deferred[tuple[0]] = function () {
                    deferred[tuple[0] + "With"](this === deferred ? promise : this, arguments);
                    return this;
                };
                deferred[tuple[0] + "With"] = list.fireWith;
            });

            // Make the deferred a promise
            promise.promise(deferred);

            // Call given func if any
            if (func) {
                func.call(deferred, deferred);
            }

            // All done!
            return deferred;
        },

        // Deferred helper
        when: function (subordinate /* , ..., subordinateN */) {
            var i = 0,
                resolveValues = slice.call(arguments),
                length = resolveValues.length,

                // the count of uncompleted subordinates
                remaining = length !== 1 || (subordinate && jQuery.isFunction(subordinate.promise)) ? length : 0,

                // the master Deferred. If resolveValues consist of only a single Deferred, just use that.
                deferred = remaining === 1 ? subordinate : jQuery.Deferred(),

                // Update function for both resolve and progress values
                updateFunc = function (i, contexts, values) {
                    return function (value) {
                        contexts[i] = this;
                        values[i] = arguments.length > 1 ? slice.call(arguments) : value;
                        if (values === progressValues) {
                            deferred.notifyWith(contexts, values);

                        } else if (!(--remaining)) {
                            deferred.resolveWith(contexts, values);
                        }
                    };
                },

                progressValues, progressContexts, resolveContexts;

            // add listeners to Deferred subordinates; treat others as resolved
            if (length > 1) {
                progressValues = new Array(length);
                progressContexts = new Array(length);
                resolveContexts = new Array(length);
                for (; i < length; i++) {
                    if (resolveValues[i] && jQuery.isFunction(resolveValues[i].promise)) {
                        resolveValues[i].promise()
                            .done(updateFunc(i, resolveContexts, resolveValues))
                            .fail(deferred.reject)
                            .progress(updateFunc(i, progressContexts, progressValues));
                    } else {
                        --remaining;
                    }
                }
            }

            // if we're not waiting on anything, resolve the master
            if (!remaining) {
                deferred.resolveWith(resolveContexts, resolveValues);
            }

            return deferred.promise();
        }
    });