Deferred是jquery的promise接口的实现。他是非同步操作的通用接口,可以看作是完成一个任务之后再执行另外一个任务。

观察者模式是开发中经常使用的模式,这个模式由两个主要部分组成:主题和观察者。通过观察者模式,实现主题和观察者的解耦.

主题负责发布内容,而观察者则接收主题发布的内容。

在 jQuery 中,实现观察者模式的就是 Deferred 了,我们先看它的使用。

使用 Deferred

// 定义主题
var subject = (function(){
var dfd = $.Deferred(); var task = function()
{
// 发布内容
dfd.resolve("Alice");
} setTimeout( task, 3000); return dfd.promise();
})(); // 两个观察者
var fn1 = function(content){
console.log("fn1: " + content );
} var fn2 = function(content){
console.log("fn2: " + content );
} // 注册观察者
$.when( subject )
.done( fn1 )
.done( fn2 );

在 jQuery 中,甚至可以提供两个主题同时被观察, 需要注意的是,要等两个主题都触发之后,才会真正触发,每个观察者一次得到这两个主题,所以参数变成了 2 个。

// 定义主题
var subjectAlice = (function(){
var dfd = $.Deferred(); var task = function()
{
// 发布内容
dfd.resolve("Alice");
} setTimeout( task, 3000); return dfd.promise();
})(); var subjectTom = (function(){
var dfd = $.Deferred(); var task = function()
{
// 发布内容
dfd.resolve("Tom");
} setTimeout( task, 1000); return dfd.promise();
})(); // 两个观察者
var fn1 = function(content1, content2){
console.log("fn1: " + content1 );
console.log("fn1: " + content2 );
} var fn2 = function(content1, content2){
console.log("fn2: " + content1 );
console.log("fn2: " + content2 );
} // 注册观察者
$.when( subjectAlice, subjectTom )
.done( fn1 )
.done( fn2 );

$.when()方法

$.when()接受多个deferred对象作为参数,当它们全部运行成功后,才调用resolved状态的回调函数,但只要其中有一个失败,就调用rejected状态的回调函数。它相当于将多个非同步操作,合并成一个。

例如:

$.when(
$.ajax( "/main.php" ),
$.ajax( "/modules.php" ),
$.ajax( "/lists.php" )
).then(successFunc, failureFunc);

上面代码表示,要等到三个ajax操作都结束以后,才执行then方法指定的回调函数。

when方法里面要执行多少个操作,回调函数就有多少个参数,对应前面每一个操作的返回结果。

例如:

$.when(
$.ajax( "/main.php" ),
$.ajax( "/modules.php" ),
$.ajax( "/lists.php" )
).then(function (resp1, resp2, resp3){
console.log(resp1);
console.log(resp2);
console.log(resp3);
});

上面代码的回调函数有三个参数,resp1、resp2和resp3,依次对应前面三个ajax操作的返回结果。

then()方法

then()的作用也是指定回调函数,它可以接受三个参数,也就是三个回调函数。第一个参数是resolve时调用的回调函数,第二个参数是reject时调用的回调函数,第三个参数是progress()方法调用的回调函数。

代码如下:
deferred.then( doneFilter [, failFilter ] [, progressFilter ] )

then()和done()的区别

在jQuery 1.8之后,then()返回一个新的deferred对象,而done()返回的是原有的deferred对象。

如果then()指定的回调函数有返回值,该返回值会作为参数,传入后面的回调函数。

例如:如下代码:

var defer = jQuery.Deferred();
defer.done(function(a,b){
return a * b;
}).done(function( result ) {
console.log("result = " + result);
}).then(function( a, b ) {
return a * b;
}).done(function( result ) {
console.log("result = " + result);
}).then(function( a, b ) {
return a * b;
}).done(function( result ) {
console.log("result = " + result);
});
defer.resolve( 2, 3 );

返回的结果为:

result = 2 
result = 6 
result = NaN

分析:

1)上面的第一个result是第一个result的最后一个done()的输出,前一个done的return不会传递到这里,所以result是resolve的第一个参数
2)第二个result是第二个deferred的输出,第一个then所带的function的输入,传入第二个deferred,因此第五个done能够接受到2*3的result。
3)第三个result是第三个deferred的输出,第二个then执行时,只有a,没有b(上一个then执行时返回的是a*b,所以再第三个then执行时只有a,没有b),所以result是NaN。 综合例子如下:
    var requestInfo = function() {
var defered = $.Deferred();
var url = "https://api.ffan.com/activity/v1/homepage/index";
$.ajax(url, {
dataType: "jsonp",
jsonp: "callback",
timeout: 5000,
data: {
type: "cityList"
}
}).then(function(response) {
if (response && response.data && response.data[0]) {
defered.resolve(response.data[0].cityList);
}
})
return defered.promise();
}
var cityInfo = function(result) {
var list = _.groupBy(result, function(city) {
return city.cityPinYin.charAt(0).toUpperCase();
}); _.each(list,function(city,key){
console.log(key);
_.each(city,function(item,index){
console.log("item.cityId="+item.cityId);
console.log("item.cityName="+item.cityName);
})
}) //获取第一条数据的cityId
var cityId=list["A"][0].cityId;

//返回值,供下一个then调用
return {
id:cityId
}
}
 var info=function(result){
var id=result.id;//上一个then返回的值
console.log("cityid="+id);
return true;
}

调用:

 $.when(requestInfo())
.then(cityInfo)
.then(info);

jquery 之 Deferred 使用的更多相关文章

  1. jQuery之Deferred源码剖析

    一.前言 大约在夏季,我们谈过ES6的Promise(详见here),其实在ES6前jQuery早就有了Promise,也就是我们所知道的Deferred对象,宗旨当然也和ES6的Promise一样, ...

  2. jQuery的deferred对象详解

    jQuery的deferred对象详解请猛击下面的链接 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...

  3. jQuery的deferred对象学习

    #copy { background-color: lightgreen; padding: 15px; margin: 10px } 一.deferred对象简介 deferred对象是jquery ...

  4. jquery 之 Deferred 使用与实现

    观察者模式是开发中经常使用的模式,这个模式由两个主要部分组成:主题和观察者.通过观察者模式,实现主题和观察者的解耦. 主题负责发布内容,而观察者则接收主题发布的内容.通常情况下,观察者都是多个,所以, ...

  5. jQuery的deferred对象详解(转载)

    本文转载自: jQuery的deferred对象详解(转载)

  6. jQuery的Deferred

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. jQuery的deferred对象

    应用场景:处理异步任务 看到一篇阮一峰老师的博客挺好的讲的就是jQuery的deferred对象.坦诚讲之前没有怎么用过这个东东呢. 摘其中几点记录下 (1) $.Deferred() 生成一个def ...

  8. jQuery的deferred对象详解(一)

    最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...

  9. jQuery的deferred对象解析

    参考: jQuery的deferred对象详解:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_defe ...

  10. [转] jQuery的deferred对象详解

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...

随机推荐

  1. js 自学,云知梦知识 点理论

    一.第1章(1--4) 何为js特效 1.定义事件(触发时机+行为) 2.触发事件(行为发生) 3.事件发生是具有重复性   js是基本对象的语言. 面向对像编程 1.如何获得该对象 2.如何 调用该 ...

  2. KVC && KVO 初见

    Look,这是一个很简单的要求,点击Add me,age +1. 想一想的话很简单的,设置一个属性Nsinteger age,点击button add me,直接加1在重新显示Lable就好啦,不过, ...

  3. Jquery Ajax Json ashx 实现前后台数据传输

    经过一个多星期的研究,各种查找资料终于自己实现了Jquery  Ajax Json ashx 的前后台数据交流功能 首先一点,Ajax只能对应一个ashx文件,多余两个,如果打开异步传输的async: ...

  4. php自定义函数: 时间转换成智能形式

    function time_trans($paratime,$suffix=false){ $now_time = time(); $dur = $now_time - $paratime; $suf ...

  5. 洛谷 P4819 [中山市选]杀人游戏

    洛谷 题目就是让我们在DAG中找到一些点,覆盖所有点. 因为是DAG,可以想到tarjan缩一下点.假设我们需要找x个点,那么答案就是(n-x)/n. 我们怎么选点呢? 敏锐的我们很快就能想到,直接选 ...

  6. Oracle 报 ORA-21561: OID generation failed 错误 mac 链接oracle

    简单的说:在终端输入:sudo scutil --set HostName localhost

  7. 解读mysql主从配置及其原理分析(Master-Slave)

    在windows下配置的,后面会在Linux下配置进行测试,需要配置mysql数据库同步的朋友可以参考下. 1.在主数据库服务器为从服务器添加一个拥有权限访问主库的用户:GRANT REPLICATI ...

  8. google黑客语法总结

    搜索也是一门艺术 说起Google,可谓无人不知无人不晓,其强大的搜索功能,可以让你在瞬间找到你想要的一切.不过对于普通的用户而言,Google是一个强大的搜索引擎:而对于黑客而言,则可能是一款绝佳的 ...

  9. Python学习进程(1)Python简介

        Python是一种结合了"解释性"."编译性"."互动性"和"面向对象"的脚本语言. (1)官方介绍: Pyth ...

  10. Nginx配置指令的执行顺序

    rewrite阶段 rewrite阶段是一个比较早的请求处理阶段,这个阶段的配置指令一般用来对当前请求进行各种修改(比如对URI和URL参数进行改写),或者创建并初始化一系列后续处理阶段可能需要的Ng ...