jQuery->Deferred then

合格的项目经理应该具备哪些技能?

奥,不知道哎!但我知道不合格的项目经理具备哪些特点

1. 不看代码

2. 识别不了平庸与卓越

3. 催进度

1. then返回值是什么?var a =
aDeferred.then(),a和aDeferred是什么关系?

then的返回值是一个promise,也就是没有触发功能(resolve,reject,notify)的Deferred对象

a和aDeferred啥关系也不是,a是新生成的promise。

2.
$.Deferred(fn)是什么意思?

$.Deferred(fn)等价于:
var t = $.Deferred(); fn.call(t ,
t);
即在t的作用域上,函数fn以t为参数做调用。

3. var t = $.Deferred().then();
t和下面代码中then函数中的newDefer参数是什么关系?

newDefer中的属性copy自t,t是newDefer的子集

?





1

2

3

4

5

then: function() {

    var
fns = arguments;

    return
jQuery.Deferred(function( newDefer ) {...

    }).promise();

}  

4
tuples来自哪里?deferred指的是谁?

假设调用t.then(),tuples是生成t时产生的,deferred同理


    then: function( /* fnDone, fnFail, fnProgress */ ) {
var fns = arguments;
return jQuery.Deferred(function( newDefer ) {
jQuery.each( tuples, function( i, tuple ) {
var action = tuple[ 0 ],
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[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
}
});
});
fns = null;
}).promise();
}

5.$.each(arr,
fn);函数fn中的this对象是谁?

arr[i],$.each中对fn的调用进行了作用域的绑定


each: function( obj, callback, args ) {
...
} else {
if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback.call( obj[ i ], i, obj[ i ] );
...
}
}
}
return obj;
}

6. deferred[ tuple[1]
](fn)在做什么?

将fn添加到deferred的回调函数列表,以便deferred.resolve/reject()触发后回调fn

7. jQuery.isFunction( returned.promise
)是什么意思?

判断returned是否至少是promise对象。

8.
returned.promise().done( newDefer.resolve )在做什么?

为returned添加处理完成的回调函数,以便returned.resolve()后去执行newDefer.resolve()

9 fn是函数,
jQuery.isFunction(
fn().promise ) === false;

$.Deferred().done(fn)与$.Deferred().then(fn)有何区别?

$.Deferred().then(fn)缺少回调函数绑定时,两者没有区别,后者会在结束时触发新生成的Deferred对象的resolveWith方法。

10 then 和pipe的区别

jquery早期版本中pipe的功能和目前(jquery1.10.1)then的功能是一致的,目前pipe是then的别名,考虑向后兼容

11.then的实际用途[1]

上面的情况下,done和then方式的调用几乎没有区别
看看下面这种情况,ajax请求,返回的数据用于修改页面的值。


$.ajax("your/url", {
dataType: "json"
}).done(
function(data) {
$.each(data, function(key, value) {
$("#" + key).val(value);
});
});

现在假设value并不是最终要展示的值,需要对value进行转换,value =
doSomethingWith(value);如果doSomethingWith包含了异步操作,怎么确保异步操作之后将正确的结果显示出来呢?

这个时候就用到了then,第一个ajax,称作ajax1,响应完成后,流程转到了then,then中返回ajax(延迟对象)
ajax2,最终,ajax2调用完成触发resolve执行done添加的函数队列,将结果显示出来。

 


    $.ajax("your/url", {
dataType: "json"
}).then(function(theOriginalData) {
return $.ajax("your/web/service/doSomethingWith", {
data: theOriginalData,
dataType: "json"
});
}).done(function(theFinalData) {
$.each(theFinalData, function(key, value) {
$("#" + key).val(value);
});
});

12 异步操作之间数据是如何传递?

以上面的示例说明,ajax1处理成功之后,会调用resolveWith触发回调函数队列


  deferred.resolveWith( callbackContext, [ theOriginalData, statusText, jqXHR ] );->

(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[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
}
}).apply(callbackContext, [ theOriginalData, statusText, jqXHR ]); ->

fn.apply( this, arguments )-> //触发另一个

(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"
}); -> //异步操作完成后

deferred.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]代码来源:understanding-deferred-pipe

[2]函数上下文中确定this的值的规则

this的值由调用者提供,由调用函数的方式决定,如果调用括号()左边是引用类型,this为这个引用类型值的base对象,其他情况this为全局对象


function foo() {
console.log(this);
}

foo(); // global, because

var fooReference = {
base: global,
propertyName: ‘foo‘
};

// 另一种调用形式
foo.prototype.constructor(); //foo.prototype, because

var fooPrototypeConstructorReference = {
base: foo.prototype,
propertyName: ‘constructor‘
};

思考下面函数表达式:
(function() {
console.log(this); // null => global
})();

function foo() {// 解释 http://dmitrysoshnikov.com/ecmascript/chapter-3-this/#comment-342
function bar() {
console.log(this); // => global
}
bar();
}

[3]源码1.10.1

时间: 2024-10-12 15:12:17

jQuery->Deferred then的相关文章

jquery Deferred

jquery Deferred使用经验 这周做了个小活动(http://aoqi.100bt.com/zt-2016duanzi/index.html),刚开始时候没看好需求,逻辑都写一块了 最后各种坑要填补,从中也获取了些经验和教训,下面说说这里会用到的$.Deferred: 关于jquery里面的deferred的基本使用方法,阮一峰大婶已经有文章说明了,链接如下: http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_o

javascript --- jQuery --- Deferred对象

javascript --- jQuery --- Deferred对象 javascript的函数式编程是多么引人入胜,jQuery使代码尽可能的精简,intelligent! defer - 必应词典:v.迁延:听从:扣存:[军]使延期入伍所以deferred对象的含义就是"延迟"到未来某个点再执行. jQuery的官方文档给出了用jQuery.ajax()发送请求的基本方式http://api.jquery.com/jQuery.ajax/Example: Save some d

jquery.Deferred promise解决异步回调

我们先来看一下编写AJAX编码经常遇到的几个问题: 1.由于AJAX是异步的,所有依赖AJAX返回结果的代码必需写在AJAX回调函数中.这就不可避免地形成了嵌套,ajax等异步操作越多,嵌套层次就会越深,代码可读性就会越差. $.ajax({ url: url, data: dataObject, success: function(){ console.log("I depend on ajax result."); }, error: function(){} }); consol

jQuery异步框架探究2:jQuery.Deferred方法

(本文针对jQuery1.6.1版本)关于Deferred函数的描述中有一个词是fledged,意为"羽翼丰满的",说明jQuery.Deferred函数应用应该更成熟.这个函数与jQuery._Deferred函数有密不可分的关系. 1 内部实现 Deferred: function( func ) { var deferred = jQuery._Deferred(), failDeferred = jQuery._Deferred(), promise; // Add error

第三十三课:jQuery Deferred

之前我们讲了Mochikit Deferred,JSDeferred,现在讲jQuery Deferred.首先,我们先来讲下他们的区别: 在保存回调函数时,Mochikit Deferred(dojo Deferred)是用一个2维数组保存的,里面的小数组只有两项,一个是成功回调的函数,一个是失败回调的函数. JSDeferred则每个实例都必有ng,ok这两个回调函数. jQuery Deferred则一个_Deferred负责添加成功回调,一个负责添加错误回调. 它们的API区别如下图:

JS魔法堂:jQuery.Deferred(jQuery1.5-2.1)源码剖析

一.前言 jQuery.Deferred作为1.5的新特性出现在jQuery上,而jQuery.ajax函数也做了相应的调整.因此我们能如下的使用xhr请求调用,并实现事件处理函数晚绑定. var promise = $.getJSON('dummy.js') // 其他逻辑处理 promise.then(function(){ alert('late binding') }) 我还一度以为这就是Promises/A+规范的实现,但其实jQuery.Deferred应该与jsDeferred归为

jquery deferred done then区别

jquery deferred done then区别 deferred是jquery 对promise的实现. 以下内容基于jquery 1.8及以上版本 deferred具有then done等属性.其区别在于Deferred resolved时, done返回当前的的deferred object,callback的返回值不会被传递 then返回一个新的deferred object,callback的返回值会被传递(参考jquery的pipe属性)给新的callback 通过以下的例子来

javascript异步代码的回调地狱以及JQuery.deferred提供的promise解决方式

我们先来看一下编写AJAX编码常常遇到的几个问题: 1.因为AJAX是异步的,全部依赖AJAX返回结果的代码必需写在AJAX回调函数中.这就不可避免地形成了嵌套.ajax等异步操作越多,嵌套层次就会越深.代码可读性就会越差. $.ajax({ url: url, data: dataObject, success: function(){ console.log("I depend on ajax result."); }, error: function(){} }); consol

jQuery deferred 使用心得

因为项目的原因,我接触到了jQuery deferred 的这个神奇的工具,下面我用几个例子,与大家分享我的感悟. 我们有5个很耗时的函数 分别为fA.fB.fC.fD.fE  我们的需求是fA和fB同时执行,fA和fB都执行完了,就同时执行fC 和fD ,其中fC和fD只要有一个执行完了,就可以执行fE了. 先完成第一步,写5个函数,并加入deferred 1 function fA(){ 2 var dtd = $.Deferred(); 3 console.log('fa Start');

jQuery deferred学习笔记

简介 在jQuery1.5.0版本引入,为了实现Deferred对象,jQuery改写了ajax.是由jQuery.Deferred()方法创建的链式对象. $.Deferred在jQuery代码自身四处被使用(promise.DOM ready.Ajax.Animation) 特性:使用Deferred对象可以添加多个回调函数; 延迟特性,处理耗时操作问题 register multiple callbacks into callback queues invoke callback queu