ajax的传统写法:

$.ajax({
url: "test.html",
success: function(){
alert("哈哈,成功了!");
},
error:function(){
alert("出错啦!");
}
});

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

所以新的写法如下:

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

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

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

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

$.ajax("test.html")
.then(function(){ alert("哈哈,成功了!"); },
function(){ alert("出错啦!"); }
);

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

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

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

var wait = function(){
setTimeout(function(){
    alert("执行完毕!");
  },5000);
};

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

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

对wait()函数进行改装:

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

然后就可以使用了:

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

参考链接

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

Jquery中的done() fail() then() $when()到底是什么的更多相关文章

  1. Ajax跨域原理及JQuery中的实现

    浅析Ajax跨域原理及JQuery中的实现分析   AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请 ...

  2. jQuery中的编程范式

    浏览器前端编程的面貌自2005年以来已经发生了深刻的变化,这并不简单的意味着出现了大量功能丰富的基础库,使得我们可以更加方便的编写业务代码,更重要的是我们看待前端技术的观念发生了重大转变,明确意识到了 ...

  3. jQuery 中的编程范式

    浏览器前端编程的面貌自2005年以来已经发生了深刻的变化,这并不简单的意味着出现了大量功能丰富的基础库,使得我们可以更加方便的编写业务代码,更重要的是我们看待前端技术的观念发生了重大转变,明确意识到了 ...

  4. jquery中的编程范式,即jquery的牛逼之处

    转自:http://www.iteye.com/topic/1119283 对jquery理解比较深,积累一下,整理了一下格式,就当练习一下 markdown 语法. 本文将结合jQuery源码的实现 ...

  5. jQuery中的100个技巧

      1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. < ...

  6. jQuery中Animate进阶用法(一)

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  7. 大白话讲解Promise(三)搞懂jquery中的Promise

    前两篇我们讲了ES6中的Promise以及Promise/A+规范,在Promise的知识体系中,jquery当然是必不可少的一环,所以本篇就来讲讲jquery中的Promise,也就是我们所知道的D ...

  8. jQuery中异步操作对象Deferred

    以下介绍一下jQuery中Deferred对象的使用: 1. 通过$.Deferred生成一个deferredObj对象; 2. deferredObj.done()指定操作成功时的回调函数; 3. ...

  9. Javascript事件模型系列(三)jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

随机推荐

  1. xshell连接问题记录

    操作系统Ubuntu 18.04 安装ubuntu后,连接不上.ubuntu18会每次重启重写dns,导致每次开机ip地址都不一样,所以需要先固定IP ubuntu18.04固定ip 修改固定 IP ...

  2. js方法中参数传过来的值包含括号

    前提,传递的id为变量值,比如从后台获取数据循环,在每个循环里调用shenpi()方法,假设传的id包含括号,例如 20190329100833(更正) 这样的数据,那么直接调用会报错,控制台会报错: ...

  3. SpringMVC深入浅出(一)

    1.Springmvc是什么 是一个表现层框架,用于接受请求及参数,响应请求回显数据. 2.SpringMVC处理流程 SpringMVC流程 1.  用户发送请求至前端控制器DispatcherSe ...

  4. 这几种JavaScript语法不要轻易使用,容易出事

    文章目录 12种不宜使用的JavaScript语法 1. == 2. with 3. eval 4. continue 5. switch 贯穿 6. 单行的块结构 7. ++和-- 8. 位运算符 ...

  5. 【每天一题】LeetCode 172. 阶乘后的零

    开源地址:点击该链接 题目描述 https://leetcode-cn.com/problems/factorial-trailing-zeroes 给定一个整数 n,返回 n! 结果尾数中零的数量. ...

  6. JS---封装getScroll函数 & 案例:固定导航栏

    封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXO ...

  7. GPS NMEA-0183标准详解

    NMEA - 0183 是美国国家海洋电子协会(National Marine Electronics Association)为海用电子设备制定的标准格式.目前业已成了 GPS/北斗导航设备统一的 ...

  8. Support URL

    如您有任何疑问或者建议,请通过以下方式与我们取得联系,我们会尽快响应您的反馈: 邮箱:eighteyes_cn@163.com

  9. 蒟蒻的PKUWC2019划水记(更新ing)

    前言 (结束再补) \(Dec\ 20th\) 正式出发 今天,是正式出发的日子. 虽说是星期五,可并没有去学校晨跑.难得睡到了\(7\)点,起来匆匆吃完了早饭(一个手抓饼),就出发去火车站了. 到了 ...

  10. ASP.NET Aries 高级开发教程:表单检测字段是否已存(番外篇)

    前言: 昨天刚好有人问了这个问题,因此就针对这个问题,补上一篇吧. 正文: 如图:在用户编辑列表中,用户名是会自动检测是否已存在的. 具体对应的Html内容如下: <label><e ...