deferred对象

deferred对象就是jQuery的回调函数解决方案

javascript中有一些操作比较耗时,如ajax操作,面对这样的情况,我们通常会指定回调函数。所谓回调函数就当这些操作结束后,应该调用哪些函数。


一、传统的ajax操作

$.ajax({url : index.html,success : function(){alert('success');},error : function(){alert('fail');}
});

这里的success方法指定了操作成功后的回调函数,fail方法指定了操作失败后的回调函数。下面我们再来看一下,用deferred对象,写法是怎样的?


二、deferred对象的链式操作

$.ajax('index.html')
.done(function(){alert('success');})
.fail(function(){alert('fail');});

这里的done()相当于success方法,fail()相当于error方法。这种链式写法很清晰、可读性也很强。deferred对象的强大还不止于此。

1、deferred对象可以为一个操作指定多个回调函数。

$.ajax('index.html')
.done(function(){alert('success');})
.fail(function(){alert('fail');})
.done(function(){alert('第二个回调函数');});

像上面这样,我们可以指定任意多个回调函数,这些回调函数按顺序执行。

2、为多个操作指定回调函数

$.when($.ajax('index1.html'),$.ajax('index.html'))
.done(function(){alert('success');})
.fail(function(){alert('fail');});

这里我们用到了$.when()方法,这个方法的参数是deferred对象,这段代码的意思是只有两个操作都成功了,才运行done()指定的回调函数,其他情况运行fail()指定的回调函数.


三、普通操作的回调函数

deferred对象最大的有点在于,对于ajax操作、本地操作;异步操作、同步操作,都可以使用deferred对象的方法指定回调函数.

比如说有一个很耗时的操作wait:

var wait=function(){var tasks=function(){alert('执行完毕');}setTimeout(tasks,5000); //真的很耗时
}

如果我们想为这个函数指定回调函数,应该怎么做呢?我们首先来深入的了解一下deferred对象.

1、三种执行状态

deferred对象有三种执行状态:未完成、已完成、已失败。如果状态是已完成,deferred对象就是调用done()方法指定的回调函数;如果状态是已失败,deferred对象就是调用fail()方法指定的回调函数。deferred.resolve()方法将执行状态从未完成改为已完成,从而调用done()方法;deferred.reject()方法将执行状态从未完成改为已失败,从而调用fail()方法。

2、改变状态

前面提到的ajax操作,deferred对象会根据返回的结果,自动改变自身的状态;但在wait函数中,需要手动改变 deferred的执行状态,从而触发相关回调函数。

3、deferred.promise()方法

deferred.promise()的作用是在原来deferred对象上返回另一个deferred对象,后者只开放与执行状态无关的方法(如 done() 方法和 fail() 方法),屏蔽改变执行状态有关的方法(如 resolve()方法reject() 方法)。

了解了以上三点之后,我们来为wait()函数指定回调函数。

var wait=function(){var dfd=$.Deferred(); //在函数内部创建一个deferred对象var tasks=function(){alert('执行完毕');dfd.resolve(); //改变执行状态}setTimeout(tasks,5000);return dfd.promise(); //返回promise对象
};$.when(wait())
.done(function(){alert('success');})
.fail(function(){alert('fail');})

这里有三点需要注意:

  • 最好在函数的内部创建deferred对象,这样可以防止在外部修改deferred对象的执行状态。

  • 最好返回promise对象,还是防止执行状态在函数外部被改变。

  • 要在合适的时候改变deferred对象的执行状态,一般是在耗时的操作执行完之后,改变deferred对象的执行状态。

这样我们就完成了为普通操作添加回调函数。


四、deferred对象的其他方法

deferred.then()方法,接受两个参数,第一个参数是done()方法的回调函数;第二个参数是fail()方法的回调函数。具体写法如下:

$.when($.ajax('index.html'))
.then(successFunction , failFunction);

这样省力了一下呢!

deferred.resolve(arg)方法是可以接受参数的,这个参数将会传递给通过deferred.thendeferred.done 添加的doneCallbacks


本文主要简单的介绍了一下deferred对象的使用场景和使用方法。

关于deferred对象的其他方法,请大家查看jquery官方文档

我在学习过程中阅读的相关文献

deferred对象相关推荐

  1. jQuery的deferred对象详解

    阮一峰大神的关于jQuery的deferred对象详解 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...

  2. 谈谈JQuery的Deferred对象

    最近一个变态的项目,一个页面只含编辑器且有下载功能,大概含20个左右接口,要求数据完整显示(很多echarts图),弄个等待圈圈等它loading,启用jQuery的Deferred延迟对象,再多的接 ...

  3. jquery的deferred对象

    1.$.Deferred 生成一个deferred对象.  //var dtd = $.Deferred; 2.dtd.done()指定操作成功时的回调函数. 3.dtd.fail()指定操作成功时的 ...

  4. jQuery中deferred对象的使用(二)

    接上一回的内容,漏了一个always()方法,参数也是回调函数,与done和fail不同的是,无论任何情况都执行always方法中的回调. deferred对象的使用(二) deferred对象不光可 ...

  5. JQuery Deferred 对象

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

  6. deferred对象和promise对象(二)---deferred对象

    早上醒来,继续讨论deferred对象和primise对象. deferred对象的的方法: 1.$.Deferred()-----生成一个deferred对象 2.deferred.done()-- ...

  7. JQuery:deferred对象的方法

    为什么80%的码农都做不了架构师?>>>    (1) $.Deferred() 生成一个deferred对象. (2) deferred.done() 指定操作成功时的回调函数 ( ...

  8. 读jQuery之二十(Deferred对象)

    Deferred对象是由 jQuery.Deferred 构造的,jQuery.Deferred 被实现为简单工厂模式. 它用来解决JS中的异步编程,它遵循 Common Promise/A 规范.实 ...

  9. [翻译]在jQuery 1.5中使用deferred对象

    原文:http://www.erichynds.com/jquery/using-deferreds-in-jquery/ 翻译:三生石上(http://cnblogs.com/sanshi/) 译者 ...

  10. Promise的deferred对象详解

    基础知识 简单说,deferred 对象就回调函数解决方案.在英语中,defer的意思是"延迟",所以 deferred 对象的含义就是"延迟"到未来某个点再执 ...

最新文章

  1. 你的能力代表你能走多远
  2. SQL For Xml
  3. 【PAT乙级】1082 射击比赛 (20 分)
  4. xp系统的计算机管理中用户在哪里,WINDOWSXP的用户管理和系统安全设置
  5. PAT 1048 数字加密
  6. 未给员工足额缴纳公积金!董明珠曾豪言:每人一套房不需要公积金
  7. linux 下  qserialport waitforreadyread_北师大版初中数学八年级(下)第二章第一节不等关系(精品)...
  8. input做成label效果
  9. Android--我的Butterknife黄油刀怎么找不到控件了!!!
  10. 【翻译】CodeMix使用教程(七):扩展
  11. 【前端面试】变量和类型计算
  12. webpack遇见的坑:Please install 'webpack-cli' in addition to webpack itself to use the CLI.
  13. C语言例题-计算常量e的值
  14. 焊接工时简便计算工具_焊接工时定额计算手册.doc
  15. 我的世界java版安装mod手机版,我的世界国际版手机版
  16. 如何读博士-2021.06.12
  17. 更改Linux系统的主机名(hostname)两种实用的方法
  18. serialize()方法
  19. HDLC协议及PPP协议
  20. openstack是啥子

热门文章

  1. C#读取ACCESS数据
  2. Windows Server 2008 R2 RODC(只读域控制器)
  3. 金属商务本-戴尔Vostro成就3450评测
  4. 谁为“上班玩耍”买单
  5. 行为型模式:模板方法 1
  6. MapReduce简介和过程浅析
  7. 面试宝典系列-Mysql索引的区别
  8. 自动化(YUM/编译)安装PHP(5.3/5.5/7.0/7.1)脚本
  9. D1net阅闻:Google发布了能理解人类语言的云服务
  10. inode及硬链接和软链接