Deferred对象

Deferred对象

  1. 什么是Deferred对象?
  2. Deferred对象是从jQuery 1.5.0版本开始引入的一个新功能,只要为了解决某些JavaScript代码需要耗时很长的问题而开发的对象。简单来说Deferred对象是为了解决jquery回调函数的问题。
  3. Deferred对象的含义就是"延迟"到未来某个点再执行。

Deferred对象的状态

deferred对象有三种状态

  1. 未完成,会调用progress()方法,该方法需要在1.7.0以上才会有
  2. 已完成,会调用done()方法
  3. 已失败,会调用fail()方法

Deferred对象功能

  1. 实现链式调用
  2. 为同一操作绑定多个回调函数
  3. 为多个操作指定同一回调函数
  4. 为普通操作提供回调函数接口
1. $.ajax(obj)的链式写法

jquery1.5.0 以前,调用 $.ajax() 方法返回的是 XMLHttpRequest 对象,这就无法进行链式操作。

如果在 jquery1.5.0 以后,调用 $.ajax() 方法返回的是 deferred 对象,这就可以进行链式操作了。

// jquery1.5.0 及以前
var xhr = $.ajax({
    url: "test.html",
    success: function(){
        alert("哈哈,成功了!");
    },
    error:function(){
        alert("出错啦!");
    }
});

// jquery1.5.0之后
$.ajax("/echo/html/")
    .done(function(){ alert("哈哈,成功了!"); })
    .fail(function(){ alert("出错啦!"); });
2. 指定同一操作的多个回调函数

deferred对象的一大好处,就是它允许你自由添加多个回调函数,直接把它加在后面就行了。

$.ajax("/echo/html/")
    .done(function(){ alert("哈哈,成功了!");} )
    .fail(function(){ alert("出错啦!"); } )
    .done(function(){ alert("第二个回调函数!");} );

// 弹出 哈哈,成功了!
// 弹出 第二个回调函数!
3. 为多个操作指定同一回调函数

下面代码的意思是,先执行两个操作 $.ajax("test1.html")$.ajax("test2.html") ,如果都成功了,就运行done()指定的回调函数;如果有一个失败或都失败了,就执行fail()指定的回调函数。

$.when($.ajax("test1.html"), $.ajax("test2.html"))
    .done(function(){ alert("哈哈,成功了!"); })
    .fail(function(){ alert("出错啦!"); });
4. 为普通操作提供回调函数接口
var wait = function(){
    var tasks = function(){
        alert("执行完毕!");
    };
    setTimeout(tasks,5000);
};

$.when(wait())
    .done(function(){ alert("哈哈,成功了!"); })
    .fail(function(){ alert("出错啦!"); });

// 因为有耗时操作,tasks函数还没有执行完成,done里面的函数就已经执行了,出现的结果就是
// 哈哈,成功了!
// 执行完毕!
// 这样就违背了回调函数的本意
// 起不到回调函数的作用的原因在于$.when()的参数只能是deferred对象,所以我们需要提供一个deferred对象作为参数

// 改进
var dtd = $.Deferred(); // 新建一个deferred对象
var wait = function(dtd){
    var tasks = function(){
        alert("执行完毕!");
        dtd.resolve(); // 将dtd对象的执行状态从"未完成"改为"已完成",从而触发done()方法
    };
    setTimeout(tasks,5000);
    return dtd;
};

$.when(wait(dtd))   // 现在,wait(dtd)函数返回的是deferred对象了
    .done(function(){ alert("哈哈,成功了!"); })
    .fail(function(){ alert("出错啦!"); });

Deferred对象的方法

  1. $.Deferred() 生成一个deferred对象

  2. deferred.done() 指定操作成功时的回调函数

  3. deferred.fail() 指定操作失败时的回调函数

  4. deferred.promise() 没有参数时,返回一个新的deferred对象,该对象的运行状态无法被改变;接受参数时,作用为在参数对象上部署deferred接口

  5. deferred.resolve(arg) 手动改变deferred对象的运行状态为"已完成",从而立即触发done()方法

  6. deferred.reject(arg) 这个方法与deferred.resolve()正好相反,调用后将deferred对象的运行状态变为"已失败",从而立即触发fail()方法

  7. $.when() 为多个操作指定回调函数

  8. deferred.then() 有时为了省事,可以把done()和fail()合在一起写,这就是then()方法,如下代码

    $.when($.ajax('/data.php')).then(succeedFunc, failedFunc);
    
    /* 注意:如果then()有两个参数,那么第一个参数是done()方法的回调函数,第二个参数是fail()方法的回调方法。如果then()只有一个参数,那么等同于done()  */
    
  9. deferred.always() 这个方法也是用来指定回调函数的,它的作用是,不管调用的是deferred.resolve()还是deferred.reject(),最后总是执行

    $.ajax().always(function exec () {
        console.log('exec函数无论如何都会被执行');
    });
    
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 223,207评论 6 521
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 95,455评论 3 400
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 170,031评论 0 366
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 60,334评论 1 300
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 69,322评论 6 398
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,895评论 1 314
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,300评论 3 424
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,264评论 0 277
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,784评论 1 321
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,870评论 3 343
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,989评论 1 354
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,649评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,331评论 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,814评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,940评论 1 275
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,452评论 3 379
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,995评论 2 361

推荐阅读更多精彩内容

  • 一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有...
    壮哉我大前端阅读 261评论 0 1
  • 1、什么是deferred对象 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
    公子七阅读 269评论 1 3
  • 最近做项目,调用后端接口,需要等到2个ajax返回再执行另一个ajax,首先想到的是使用promise,但是考虑...
    晴天小猪L阅读 508评论 0 0
  • JQuery 中利用 Deferred 对象提供类似 ES2016(aka. es7) 中 Promise 的功能...
    鳳歌阅读 484评论 0 2
  • 拖着笨重的行李箱,背着塞满了书籍的背包,W这才意识到与这个城市的格格不入,好不容易上了公交,结果箱子倒了,衣服,书...
    雾都Ren阅读 359评论 1 0