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. fineuploader php服务端

    新版本的fineuploader项目中已经没有现成的php server端,需要额外使用composer进行安装,折腾好久才下下来,在此分享出来给大家. 下载地址: http://files.cnbl ...

  2. 根据WSGI协议自己实现mini-web框架(1)

    1. 为什么要研究WSGI 我之前在学习web开发时,往往都是根据MVT等架构直接写所谓的“视图”,使用其本身自带的http服务器,当时就一直很好奇,为什么有了HTTP协议之后,还要研究WSGI协议, ...

  3. Android WebView 基本设置与H5 交互

    mWebView.setDrawingCacheEnabled(true); WebChromeClient webChromeClient = new WebChromeClient(); mWeb ...

  4. 解决visual studio换行(回车键)不能代码补全问题

    打开工具--选项:将标红的位置改为true即可.

  5. MSSQL - 最佳实践 - 使用SSL加密连接

    MSSQL - 最佳实践 - 使用SSL加密连接 author: 风移 摘要 在SQL Server安全系列专题月报分享中,往期我们已经陆续分享了:如何使用对称密钥实现SQL Server列加密技术. ...

  6. sqlserver update join 多关联更新

    由于程序bug,导致之前很多数据入库后信息不全,好在有基础信息表,可以通过基础信息表更新缺失字段信息 1.通过 inner join语法实现多关联更新 update a set a.name = b. ...

  7. Android组件体系之视图绘制

    一.View组件View组件有几个重要的方法需要关注,也是自定义View经常需要重写的方法. 1.measure作用是测量View组件的尺寸.对应的方法是onMeasure,测量View的宽和高.Vi ...

  8. SpringBBoot整合MyBatis

    一.目录展示 二.导入依赖 三.配置文件application.yml 四.Student实体类 package com.zn.entity; public class Student { priva ...

  9. Java网络爬虫 HttpClient

    简介 : HttpClient是Apache Jakarta Common下的子项目,用于提供高效的,功能丰富的支持HTTP协议的客户编程工具包,其主要功能如下: 实现了所有HTTP的方法 : GET ...

  10. pycharm查看函数用法,参数信息的设置方法

    在编写python程序时,常常会遇到一些不太常见的函数,有时候又不想去百度,那么,使用pycharm设置快速显示函数的参数和用法,这个方法十分快捷方便. step1. file -> setti ...