前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Jquery中的done() fail() then() $when()到底是什么

Jquery中的done() fail() then() $when()到底是什么

作者头像
Daotin
发布2019-08-09 18:08:07
2.2K0
发布2019-08-09 18:08:07
举报

ajax的传统写法:

代码语言:javascript
复制
$.ajax({
    url: "test.html",
    success: function(){
        alert("哈哈,成功了!");
    },
    error:function(){
        alert("出错啦!");
    }
});

Jquery版本在1.5之前,返回的是XHR对象;当版本高于1.5之后,返回的是deferred对象,可以使用 done 和 fail。

所以新的写法如下:

代码语言:javascript
复制
$.ajax("test.html")
  .done(function(){ alert("哈哈,成功了!"); })
  .fail(function(){ alert("出错啦!"); });

可以有多个done,按照顺序执行。

代码语言:javascript
复制
$.ajax("test.html")
  .done(function(){ alert("哈哈,成功了!");} )
  .fail(function(){ alert("出错啦!"); } )
  .done(function(){ alert("第二个回调函数!");} );

有时为了省事,可以把done()和fail()合在一起写,这就是then()方法。

代码语言:javascript
复制
$.ajax("test.html")
    .then(function(){ alert("哈哈,成功了!"); },
          function(){ alert("出错啦!"); }
         );

$.when为多个事件指定相同的回调:

代码语言:javascript
复制
$.when($.ajax("test1.html"), 
       $.ajax("test2.html"))
        .done(function(){ alert("哈哈,成功了!"); })
        .fail(function(){ alert("出错啦!"); });

将普通的异步函数改装成deferred对象来使用$.when:

代码语言:javascript
复制
var wait = function(){
    setTimeout(function(){
    alert("执行完毕!");
  },5000);
};

在未改装前使用无效:(原因在于$.when()的参数只能是deferred对象)

代码语言:javascript
复制
$.when(wait())
  .done(function(){ alert("哈哈,成功了!"); })
  .fail(function(){ alert("出错啦!"); });

对wait()函数进行改装:

代码语言:javascript
复制
var wait = function(){
    let df = $.Deferred(); // 新建一个deferred对象
    setTimeout(function(){
        alert("执行完毕!");
        df.resolve(); // 将df对象的执行状态从"未完成"改为"已完成",从而触发done()方法。
        // df.reject(); // 将df对象的执行状态从"未完成"改为"已失败",从而触发fail()方法。
  },5000);
  
  return df;  // 现在返回的就是deferred对象了
};

然后就可以使用了:

代码语言:javascript
复制
$.when(wait())
  .done(function(){ alert("哈哈,成功了!"); })
  .fail(function(){ alert("出错啦!"); });

参考链接

http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-08-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 参考链接
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档