什么是deferred?

可以帮助我们按规定的顺序执行函数,比如说我们ajax请求数据之后,对dom进行数据填充,那我们就要先执行完ajax,拿到数据之后才能进行dom数据填充,所以这就是一个顺序执行的过程,传统的做法是事先定义好回调函数,当检测到数据请求完成时,执行事先定义的回调函数。但是,在回调函数方面,jQuery的功能非常弱。为了改变这一点,jQuery开发团队就设计了deferred对象。帮助我们更好的控制函数执行顺序。

1.5版本后的jquery使用$.ajax()返回的是deferred对象

deferred常见用法:

  1.链式调用

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

当请求完成,执行done方法;当请求失败,执行fail方法。

 2.指定同一操作的多个回调函数

deferred对象的一大好处,就是它允许你自由添加多个回调函数。而如果使用传统的回调函数,那么我们只能定义一个success方法。

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

可以看到,我们调用了两个done方法,当请求成功时,会按他们调用的顺序来先后执行两个done方法。

3.为多个操作指定回调函数

deferred对象的另一大好处,就是它允许你为多个事件指定一个回调函数,这是传统写法做不到的。

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

可以看到,使用when方法,我们可以实现当两个ajax都成功时才执行done方法。

4.deferred对象不仅适用于ajax,任何本地操作你都可以使用deffer对象来控制你的方法执行顺序。

  var wait = function (dtd) {
var dtd = $.Deferred();
var tasks = function () {
alert("任务完成!");
dtd.resolve("666");
};
setTimeout(tasks, 3000); return dtd;
}; $.when(wait())
.done(function (info) {
console.log(info);
})
.fail()
.always(function (info) { //不管成功或失败都会执行always方法
console.log(info);
});

总结:deferred对象是jquery团队设计开发的一个对象,可以帮助我们实现函数按顺序调用。ajax使用deferred对象只是其中的一种用途,任何其他本地操作都能使用deferred对象。

JQuery的deferred对象学习总结的更多相关文章

  1. jQuery的deferred对象学习

    #copy { background-color: lightgreen; padding: 15px; margin: 10px } 一.deferred对象简介 deferred对象是jquery ...

  2. jQuery的deferred对象详解(一)

    最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...

  3. [转] jQuery的deferred对象详解

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...

  4. jQuery的deferred对象详解(转)

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...

  5. jQuery的deferred对象详解 jquery回调函数

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

  6. jQuery的deferred对象详解(转载)

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本.(由于无法转载,复制原文 .原文链接——原作者:阮一峰) 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5. ...

  7. 【转】jQuery的deferred对象详解

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...

  8. jQuery的deferred对象详解(转)

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...

  9. (转)jQuery的deferred对象详解

    作者: 阮一峰 日期: 2011年8月16日 jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始 ...

随机推荐

  1. shell脚本-批量执行机器命令

    场景:通过跳板机,批量获取线上机器日志 使用方式:run2 host 'ls -al /home/admin/' #! /bin/sh USER_NAME=$USER if [ $# -ne 2 ]; ...

  2. [E::hts_idx_push] NO_COOR reads not in a single block at the end 10 -1

    在分析转录组数据时,用bowtie2比对生成的bam文件,下一步call peak使用m6Aviewer,需要bam文件的index文件.所以我直接敲命令 samtools index xx.bam ...

  3. Python random模块sample、randint、shuffle、choice随机函数概念和应用

    Python标准库中的random函数,可以生成随机浮点数.整数.字符串,甚至帮助你随机选择列表序 列中的一个元素,打乱一组数据等. random中的一些重要函数的用法: 1 ).random() 返 ...

  4. CSS3的动画属性

    transition.animation和transform是CSS3中三个制作动画的重要属性,本篇文章主要对其进行学习了解. 一.transition transition允许css的属性值在一定的 ...

  5. 【精选】Nginx模块Lua-Nginx-Module学习笔记(二)Lua指令详解(Directives)

    源码地址:https://github.com/Tinywan/Lua-Nginx-Redis Nginx与Lua编写脚本的基本构建块是指令. 指令用于指定何时运行用户Lua代码以及如何使用结果. 下 ...

  6. swift4.0 正则表达式判断手机号

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Menlo; color: #ffffff; background-color: #282b3 ...

  7. JAVA的命名方式 ,JAVA的第一个打印时间的程序

    本文内容来自:Java的命名方式 ,Java的第一个打印时间的程序 – Break易站 1. Java的命名方式 Java采用了一种全新的方法来避免上述所有问题·为了给一个类库生成不会与其他名字混淆的 ...

  8. Ubuntu 安装Appium

    1.安装node apt-get install node.js 2.安装npm apt-get install npm 3.安装cnpm npm install -g cnpm 创建链接:ln -s ...

  9. CSS背景-background

    复合属性-background 如果同时设置了background-color和background-image时,背景颜色会被图片覆盖. background-image: 用作背景的图片,back ...

  10. scrollify - 滚动条方式的全屏滚动

    jQuery Scrollify Version Beta v1.0.5 Date:2017-04-25 23:45 源代码 (function($, window, document) { 'use ...