jquery中的deferred详解

1、deferred的英文意思是:延期的

2、deferred的思想:当遇到处理耗时很多的js数据请求时,同步或者异步的操作都可能会碰到,客户端不能一直等待下去,这时候我们的处理思路是给该请求注册一个回调事件,等服务器有结果返回时执行。总之,deferred就是回调方法的解决方案。

3、故事背景:

当去超市定购一台家电,因为超市暂时没货需要从别的仓库调货(这时就产生了一个deferred),货到后就会立即给配送,但是需要一个约定(promise)即购物单上需标明货物型号、产品外观、价格等等参数,如果在周转货物的过程中如果有什么意外(如周转时间太长)就应该通知客户(notify,这个通知可能是多次的,因为异步状态有多个状态的变化)。如果等到约定发货的时候如果发现和购物单上的一致,我们就认为这个promise有效,要收货签字(resolve),如果不一致就要拒签(reject)。

4、jquery中的deferred

该对象的引入是在jquery的1.5版本(),是通过使用jquery.Deferred()方法创建个可以链式调用的工具对象,可以注册多个回调方法到回调队列。

(1)1.5版本前经常使用的ajax形式,返回的是XHR对象,该版本后返回的是deferred对象:

 $.ajax({

    url: "test.html",

    success: function(){

      alert("success");

    },

    error:function(){

      alert("error");

    }

  });

1.5版本后仍然支持上面的写法,但是1.5后可以链式操作,如下:

$.ajax({

url: ‘/path/to/file‘,

type: ‘‘,

dataType: ‘‘,

data: {},

})

.done(function() {

console.log("success");

})

.fail(function() {

console.log("error");

})

并且还可以继续添加链接方法,如下形式:

$.ajax({

url: ‘/path/to/file‘,

type: ‘‘,

dataType: ‘‘,

data: {},

})

.done(function() {

console.log("first done");

})

.fail(function() {

})

.done(function(){

console.log("second done");

});

这时候如果我想等到两个ajax请求都返回后再去执行done、fail方法该怎么办呢?

很简单,你可以使用:

$.when($.ajax("test1.html"), $.ajax("test2.html"))

  .done(function(){

alert("两个请求都成功了!");

});

注:when接受的是deferred对象

when的实现原理可以参考jquery(1.11.1)源码中的3340行到3389行

(2)到现在咱们还没有提到resolve,reject和notify,别急,马上就开始,

要说清楚这个问题,就要引入一个新概念"执行状态"。

jQuery规定,deferred对象有三种执行状态----未完成,已完成和已失败。

如果执行状态是"已完成"(resolved),将deferred对象的执行状态从"未完成"改为"已完              成", deferred对象立刻调用done()方法指定的回调函数,

如果执行状态是"已失败",调用fail()方法指定的回调函数,

如果执行状态是"未完成",则会触发nodify方法指定的回调函数

      例子如下:

http://jsfiddle.net/houyaowei/0jzL93j2/ 该例子立即执行done方法

http://jsfiddle.net/houyaowei/khgoqnp1/3/  reject

http://jsfiddle.net/houyaowei/ummefcLw/5/  resolve

http://jsfiddle.net/houyaowei/rcocx47a/    动态改变resolve

为了处理运行状态被动态改变的问题,jQuery提供了deferred.promise()方法。它的作用是,         在原来的deferred对象上返回另一个新deferred对象(promise),

该对象的运行状态无法被改变

promise只开放与改变执行状态无关的方法(比如done()方法和fail()方法),

屏蔽与改变执行状态有关的方法(比如resolve()方法和reject()方法)

例子如下:

http://jsfiddle.net/houyaowei/b4h6we8t/2/  promise

(3)promise的then方法:

为了处理方便,done和fail方法合并为then方法,

deferred.then( doneFilter [, failFilter ] [, progressFilter ] )

doneFilter: 为done的处理方法

可选参数failFilter为原fail的处理方法

例如:

$.get( "index.html" ).then(

function() {

alert( " succeeded" );

}, function() {

alert( " failed!" );

}

);

详细的API请访问 http://api.jquery.com/

欢迎拍砖,如果哪个地方描述的不合理或者讲的有错,请留言,谢谢!!

时间: 2024-10-07 03:59:04

jquery中的deferred详解的相关文章

HTML5移动开发之路(35)——jQuery中的过滤器详解

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(35)--jQuery中的过滤器详解 1.基本过滤选择器 :first:last:not(selector) :selector匹配的节点之外的节点:even :偶数:odd :奇数:eq(index):gt(index) :比他大的 :lt(index) :比他小的 [html] view plain copy print? <html> <head> <script src=&quo

JQuery中on()函数详解

JQuery API中定义的on方法,专业名词很多,读起来并不是那么容易,而对于开发人员知道函数怎么使用就可以了.本文将JQuery的说明翻译如下: on(events,[selector],[data],fn) events:事件名,必写参数 [selector]:子元素选择器名,选填参数 [data]:事件触发时,传入函数的参数,可通过event.data对象获取,选填参数 fn:事件触发时所执行的动作,必写参数 示例:<!DOCTYPE html><html><head

jQuery中的冒号详解

冒号  可以理解为 “匹配” 或 “选取”的意思. $(":button") 表示匹配所有的按钮.$("input:checked")表示匹配所有选中的被选中元素(复选框.单选框等,不包括select中的option). $("div.container")中的'.'号表示class, $("div #msg")中的'#'表示id.那么$(":button") 中的':'表示类型(type),如$(&quo

第三十四课:jQuery Deferred详解2

上一课主要分析了jQuery1.51版本的jQuery Deferred.在jQuery1.6中,jQuery Deferred添加了两个方法,always,pipe. always用来添加回调,无论成功还是失败,都会执行. pipe就是管道的意思,对回调使用瀑布模型,上一个回调的返回值供下一个会调使用. 我们举个例子来说明下pipe与then的区别: var deferred = $.Deferred();  //返回的是Deferred对象 var promise = deferred.pi

触碰jQuery:AJAX异步详解

触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和XHTML来表示. 2)   使用DOM模型来交互和动态显示. 3)   使用XMLHttpRequest来和服务器进行异步通信. 4)   使用javascript来绑定和调用.

触碰jQuery:AJAX异步详解(转)

AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和XHTML来表示. 2)   使用DOM模型来交互和动态显示. 3)   使用XMLHttpRequest来和服务器进行异步通信. 4)   使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请

jQuery Event.which 属性详解

jQuery Event.which 属性详解 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮. 对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮. which属性对DOM原生的event.keyCode和event.charCode进行了标准化. 适用的事件类型主要有键盘事件:keypress.keydown.keyup,以及鼠标事件:mouseup.mousedown. 该属性属于jQuery的Event对象(实例). 语法 jQuery 1.1.3 新增该

jQuery Validate验证框架详解

jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src

【转】jQuery Validate验证框架详解

jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src