jquery源码之when
2015-07-02 20:08
666 查看
$.when()是$.Deferred()的辅助方法。
一、when的用法。
when接受多个Deferred对象作为入参,有以下几种情况:
1.没有入参或者入参都不是Deferred对象时,直接执行$.when().done()中添加的函数。
2.1个Deferred对象作为入参时,如果Deferred对象成功了,则执行$.when().done()添加的事件,失败则执行when的fail添加的函数。
3.多个Deferred对象作为入参时,所有的Deferred对象成功完成,则触发$.when().done()中添加的事件,失败则执行$.when().fail()添加的事件。
二、源码解析
(1)当when之中只有一个入参时
我们发现源码之中,把入参赋给了内部的deferred对象,这个对象时在$.when之中创建并且返回的。在这种情况下,会跳过中间的步骤,直接到最后,返回return deferred.promise() ,也就是返回入参的promise对象,然后再这个对象上又添加了done事件和fail事件(可以在同一个deferred对象上添加多个done或者fail,按顺序执行)。
当执行完deferred对象的resolve之后,执行done之中添加的函数。
(2)当有多个入参时
当有多个入参时,$.when()内部会创建一个deferred对象,该对象用来回调$.when().done().fail()中添加的函数。看下原理:
传入的Deferred对象,执行成功后,回调done事件中updateFunc内部返回的匿名函数,然后--remaining,如果作为入参的Deferred对象全部成功执行,remaining为0,那么deferred.resolve()执行,回调$.when().done()添加的回调。如果,有一个执行不成功,外部入参fail事件触发,执行内部deferred.reject(),那么接着回调$.when().fail()中添加的回调
一、when的用法。
when接受多个Deferred对象作为入参,有以下几种情况:
1.没有入参或者入参都不是Deferred对象时,直接执行$.when().done()中添加的函数。
$.when() .done(function(){ alert("OK"); }) .fail(function(){ alert("failed") ; });
var a , b, c; $.when(a,b,c) .done(function(){ alert("OK"); }) .fail(function(){ alert("failed") ; });
2.1个Deferred对象作为入参时,如果Deferred对象成功了,则执行$.when().done()添加的事件,失败则执行when的fail添加的函数。
var dfd1= $.Deferred();
dfd1.done(function(){
alert(1);
});
$.when() .done(function(){ alert("OK"); }) .fail(function(){ alert("failed") ; });
dfd1.resolve();
3.多个Deferred对象作为入参时,所有的Deferred对象成功完成,则触发$.when().done()中添加的事件,失败则执行$.when().fail()添加的事件。
var dfd1= $.Deferred(), dfd2= $.Deferred(); dfd1.done(function(){ alert(1); }); dfd2.done(function(){ alert(2); }); $.when(dfd1,dfd2) .done(function(){ alert("OK"); }) .fail(function(){ alert("failed"); }); dfd1.resolve(); dfd2.reject();
二、源码解析
(1)当when之中只有一个入参时
我们发现源码之中,把入参赋给了内部的deferred对象,这个对象时在$.when之中创建并且返回的。在这种情况下,会跳过中间的步骤,直接到最后,返回return deferred.promise() ,也就是返回入参的promise对象,然后再这个对象上又添加了done事件和fail事件(可以在同一个deferred对象上添加多个done或者fail,按顺序执行)。
当执行完deferred对象的resolve之后,执行done之中添加的函数。
(2)当有多个入参时
当有多个入参时,$.when()内部会创建一个deferred对象,该对象用来回调$.when().done().fail()中添加的函数。看下原理:
<pre name="code" class="javascript">when: function( subordinate /* , ..., subordinateN */ ) { var i = 0, resolveValues = slice.call( arguments ), //把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(), //Deferred对象,一个入参则把入参赋给变量,多个或者没有,则创建
if ( length > 1 ) { //如果when中传入的参数大于1个,进入if progressValues = new Array( length ); progressContexts = new Array( length ); resolveContexts = new Array( length ); for ( ; i < length; i++ ) { if ( resolveValues[ i ] && jQuery.isFunction( resolveValues[ i ].promise ) ) { //Deferred对象则进入if resolveValues[ i ].promise() //入参deferred对象又添加done fail等事件 .done( updateFunc( i, resolveContexts, resolveValues ) ) //执行updateFunc .fail( deferred.reject ) //外部入参fail回调添加内部deferred对象的reject方法 .progress( updateFunc( i, progressContexts, progressValues ) ); } else { --remaining; } } } // If we're not waiting on anything, resolve the master if ( !remaining ) { //如果remaining0,进入if deferred.resolveWith( resolveContexts, resolveValues ); } return deferred.promise();
传入的Deferred对象,执行成功后,回调done事件中updateFunc内部返回的匿名函数,然后--remaining,如果作为入参的Deferred对象全部成功执行,remaining为0,那么deferred.resolve()执行,回调$.when().done()添加的回调。如果,有一个执行不成功,外部入参fail事件触发,执行内部deferred.reject(),那么接着回调$.when().fail()中添加的回调
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 ); } }; },
相关文章推荐
- jquery基础-包裹 替换 删除 复制
- jquery-validate
- jquery实现图片预加载
- jquery 获取和设置 select下拉框的值
- jquery.min.map详见
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
- jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能
- 看看该死的jquery.form.js的用法,不是个东西
- jQuery Easy UI LinkButton(button)包
- 查看jquery绑定的事件函数
- jQuery幻灯片插件autoPic
- JavaScript封装Ajax(类JQuery中$.ajax()方法)
- jquery easyui datagrid js获取记录数 页数 当前页
- JavaScript & JQuery 交互式Web前端开发
- 一个非常简洁的 jQuery 图片轮播插件
- JQuery+ HightChart+Ajax
- jquery删除数组中重复元素
- 判断浏览器 插件 jquery.ua.js
- 短而实用的jQuery代码
- [jquery实例] 点击返回顶部top