javascript代码实例教程-jQuery回调、递延对象总结(下篇) ―― 解密jQuery.when方法

发布时间:2019-02-12 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery回调、递延对象总结(下篇) ―― 解密jQuery.when方法脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 设计思路(意图)

 

执行jQuery.when将会返回一个Promise对象,我们称作由when生成的Promise对象,如果给定的所有Promise对象均已执行,就立即执行

 

由when方法产生的PRomise对象,如果给定的Promise对象中有任意一个被拒绝,就立即拒绝由when生成的Promise对象,这样做的意图

 

好像就是为了解决这样一种需求:在指定的多个异步事件都完成了,然后才能干自己想干的事情

 

 

 

码解析

 

复制代码

jquery.extend({

    // Deferred helPEr

    // 参数为Promise对象,我们称作:给定的Promise对象

    // when函数内部的deferred对象,我们称作:由when生成的Promise对象

    when: function( subordinate /* , ..., subordinateN */ ) {

        VAR i = 0,

            resolveValues = core_slice.call( arguments ),

            length = resolveValues.length,

            // the count of uncompleted subordinates

            // 用来存储给定的未执行(解决)的Promise对象的个数

            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为when生成的Promise对象

            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 ? core_slice.call( arguments ) : value;

                    // 如果给定的任意一个Promise对象未执行或拒绝,则通知由when生成的Promise对象为pending状态

                    // 注:contexts是由所有给定的Promise对象组成的数组

                    // values是由处理所有给定的Promise对象的回调的参数组成的数组

                    if( values === progressValues ) {

                        deferred.notifyWITh( contexts, values );

                    }

                    // 如果给定的Promise对象已执行(解决),且当未执行的Promise对象个数为0,

                    // 即:给定的所有Promise对象都已执行(解决),则立即执行由when生成的Promise对象

                    // 注:contexts是由所有给定的Promise对象组成的数组,

                    // values是由处理所有给定的Promise对象的回调的参数组成的数组(请看实例1)

                    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 );

 

            // resolveValues = core_slice.call( arguments ) // 别忘了最上面的这行代码

            resolveContexts = new Array( length );

            for ( ; i < length; i++ ) {

                // 如果给定when的参数是一个Promise对象,则通知由when生成的Promise对象,通知什么,如何通知?

                // 如果给定的Promise对象已执行,则执行由when生成的Promise对象(要等到所有给定Promise对象全部执行)

                // 如果给定的任意一个Promise对象已拒绝,则拒绝由when生成的Promise对象

                // 如果未执行或拒绝,默认是pending状态

                if ( resolveValues[ i ] &amp;& jQuery.isFunction( resolveValues[ i ].promise ) ) {

                    resolveValues[ i ].promise()

                        .done( updateFunc( i, resolveContexts, resolveValues ) )

                        .fail( deferred.reject )

                        .progress( updateFunc( i, progressContexts, progressValues ) );

                }

                // 如果给定的不是一个Promise对象,那么负责减一

                else {

                    --remaining;

                }

            }

        }

 

        // if we&#39;re not waiting on anything, resolve the master

        // 如果传递给when的参数都不是递延对象,则执行由when生成的Promise对象

        if ( !remaining ) {

            // resolveContexts为一个空数组new Array( length ),resolveValues是由when参数组成的一个数组

            deferred.resolveWith( resolveContexts, resolveValues );

        }

 

        return deferred.promise();

    }

});

复制代码

 

 

实例:关于执行由when生成的Promise对象的参数的问题

 

复制代码

var promiseA = $.Deferred();

var promiseB = $.Deferred();

 

var doneFn = function(arg){

    console.LOG(arg);

};

 

promiseA.done(doneFn);

promiseB.done(doneFn);

 

promiseA.resolve('A'); // 'A'

promiseB.resolve('B'); // 'B'

 

var whenFn = function(arg1, arg2){

    console.log(this[0] === promiseA.promise()); // true

    console.log(this[1] === promiseB.promise()); // true

    console.log('promise' + arg1 + ', promise' + arg2 + ' All done!');

};

var whenPromise = jQuery.when(promiseA, promiseB);

whenPromise.done(whenFn); // true true 'promiseA, promiseB All done!'

复制代码

 

 

jQuery回调、递延对象总结:

 

递延对象中的then方法作用于使多个异步任务按照顺序执行,而jQuery.when方法作用于在多个并发的异步任务执行完毕后再干自己感兴趣的事情;

 

jQuery递延对象是基于jQuery回调对象架构的,如果你想熟练掌握jQuery递延对象,请先移步jQuery.Callbacks对象

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery回调、递延对象总结(下篇) ―― 解密jQuery.when方法全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery回调、递延对象总结(下篇) ―― 解密jQuery.when方法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。