热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jquery中deferred对象的用法介绍(附示例)

​本篇文章给大家带来的内容是关于jquery中deferred对象的用法介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

本篇文章给大家带来的内容是关于jquery中deferred对象的用法介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

什么是 deferred 对象?

延迟对象,在jQuery的1.5引入,是通过调用jQuery.Deferred()方法创建一个可链式调用的工具对象。 它可以注册多个回调到回调队列, 调用回调队列,准备代替任何同步或异步函数的成功或失败状态。——jQuery API中文文档简单说,deferred对象就是jQuery的回调函数解决方案。在英语中,defer的意思是"延迟",所以deferred对象的含义就是"延迟"到未来某个点再执行。它解决了如何处理耗时操作的问题,对那些操作提供了更好的控制,以及统一的编程接口。——阮一峰

deferred 对象的主要功能

ajax 操作的链式写法

$.ajax("test.html")
   .done(function(){ alert("success"); })
   .fail(function(){ alert("error"); });

$.ajax() 操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,无法进行链式操作;如果是高于1.5.0版本,返回的是deferred对象,可以进行链式操作。可以看到,done() 相当于 success 方法,fail() 相当于 error 方法。采用链式写法以后,代码的可读性大大提高。

这里着重强调一下 jqXHR 对象,从 jQuery 1.5 开始, $.ajax() 返回的 jqXHR对象 本身就是 deferred 对象,因此可以像上面代码中那样进行链式调用。

从 jQuery 1.5 开始,$.ajax()返回的jqXHR对象 实现了 Promise 接口, 使它拥有了 Promise 的所有属性,方法和行为。(见Deferred object获取更多信息)。为了让回调函数的名字统一,便于在$.ajax()中使用。jqXHR也提供.error() .success()和.complete()方法。这些方法都带有一个参数,该参数是一个函数,此函数在 $.ajax()请求结束时被调用,并且这个函数接收的参数,与调用 $.ajax()函数时的参数是一致。这将允许你在一次请求时,对多个回调函数进行赋值,甚至允许你在请求已经完成后,对回调函数进行赋值(如果该请求已经完成,则回调函数会被立刻调用)。

注意事项: jqXHR.success(), jqXHR.error(), 和 jqXHR.complete() 回调从 jQuery 1.8开始 被弃用过时,从jQuery 3.0开始被删除,你可以使用 jqXHR.done(), jqXHR.fail(), 和 jqXHR.always() 代替。

指定同一操作的多个回调函数
deferred 对象的一大好处,就是它允许你自由添加多个回调函数。还是以上面的代码为例,如果ajax操作成功后,除了原来的回调函数,我还想再运行一个回调函数,怎么办?很简单,直接把它加在后面就行了。

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

回调函数可以添加任意多个,它们按照添加顺序执行。

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

请看下面的代码,它用到了一个新的方法 jQuery.when():

$.when($.ajax("test1.html"), $.ajax("test2.html"))
   .done(function(){ alert('success'); })
   .fail(function(){ alert('error'); });

这段代码的意思是,先执行两个操作$.ajax("test1.html")和$.ajax("test2.html"),如果都成功了,就运行done()指定的回调函数;如果有一个失败或都失败了,就执行fail()指定的回调函数。

$.when() 方法的使用具体 参见文档。

普通操作的回调函数接口
deferred 对象的最大优点,就是它把这一套回调函数接口,从ajax操作扩展到了所有操作。也就是说,任何一个操作----不管是ajax操作还是本地操作,也不管是异步操作还是同步操作----都可以使用deferred对象的各种方法,指定回调函数。

我们来看一个具体的例子,为一个很耗时的操作 wait 指定回调函数:

var wait = function (dtd) {
    var dtd = $.Deferred(); // 在函数内部,新建一个Deferred对象
    var tasks = function () {
        alert('执行完毕!');
        dtd.resolve(); // 改变Deferred对象的执行状态
    };

    setTimeout(tasks, 5000);
    return dtd.promise(); // 返回promise对象
};

$.when(wait())
    .done(function () { alert('success'); })
    .fail(function () { alert('error'); });

另一种做法是直接将 wait 函数传入 $.Deferred()

$.Deferred(wait)
   .done(function(){ alert('success'); })
   .fail(function(){ alert('error'); });

jQuery 规定,$.Deferred() 可以接受一个函数名(注意,是函数名)作为参数,$.Deferred() 所生成的 deferred 对象将作为这个函数的默认参数。

更具体的信息请参见 阮一峰的文档。

deferred 对象的方法

$.Deferred() 生成一个 deferred 对象。
jQuery.Deferred( [beforeStart ] ) 工厂函数创建一个新的deferred对象。

描述: 一个工厂函数,这个函数返回一个链式实用对象,用返回对象方法来在回调队列中注册多个回调, 调用回调队列,传递任何同步或异步函数的成功或失败状态。

beforeStart : 类型 Function( Deferred deferred ),一个构造函数返回之前调用的函数。

jQuery.Deferred 方法可以传递一个可选的函数, 这个函数在方法返回之前调用,并且会把新的 deferred(延迟)对象作为 this 对象,将其作为第一个参数传递给函数。例如,被调用的函数可以使用 deferred.then() 绑定回调。

deferred.done() 指定操作成功时的回调函数。

deferred.fail() 指定操作失败时的回调函数。

deferred.promise() 没有参数时,返回一个新的 deferred。 对象,该对象的运行状态无法被改变;接受参数时,作用为在参数对象上部署 deferred 接口。

deferred.resolve() 手动改变 deferred 对象的运行状态为"已完成",从而立即触发 done() 方法。

一个 Deferred(延迟)对象开始于 pending 状态。 任何回调使用 deferred.then(), deferred.always(), deferred.done(), 或者 deferred.fail() 添加到这个对象都是排队等待执行。调用 deferred.resolve() 转换 Deferred(递延)到 resolved(解决)的状态,并立即执行设置中任何的 doneCallbacks。调用 deferred.reject() 转换 Deferred(递延)到 rejected(拒绝)的状态,并立即执行设置中任何的 failCallbacks。一旦对象已经进入了解决或拒绝状态,它处于该状态。回调仍然可以添加到解决或拒绝 Deferred(递延)- 他们会立即执行。

$.ajax() 返回的 jqXHR 对象 会根据请求返回的结果,自动改变自身的执行状态。但是,对于其他通过 $.Deferred() 方法生成的 deferred 对象,它们的执行状态必须由程序员手动指定,由代码决定在什么时候触发回调函数。

deferred.reject() 这个方法与 deferred.resolve() 正好相反,调用后将 deferred 对象的运行状态变为"已失败",从而立即触发 fail() 方法。

$.when() 为多个操作指定回调函数。

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

$.when($.ajax( '/main.php' ))
   .then(successFunc, failureFunc);

如果 then() 有两个参数,那么第一个参数是 done() 方法的回调函数,第二个参数是 fail() 方法的回调方法。如果 then() 只有一个参数,那么等同于 done()。

deferred.always() 方法
这个方法也是用来指定回调函数的,它的作用是,不管调用的是 deferred.resolve() 还是 deferred.reject(),最后总是执行。

$.ajax( 'test.html' )
    .always( function() { alert('已执行!');} );

更多信息请参见 jQuery API中文文档。

本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的Javascript视频教程栏目!

以上就是jquery中deferred对象的用法介绍(附示例)的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
  • 前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 在springmvc框架中,前台ajax调用方法,对图片批量下载,如何弹出提示保存位置选框?Controller方法 ... [详细]
  • 本文介绍了一种处理AJAX操作授权过期的全局方式,以解决Asp.net MVC中Session过期异常的问题。同时还介绍了基于WebImage的图片上传工具类。详细内容请参考链接:https://www.cnblogs.com/starluck/p/8284949.html ... [详细]
  • MySQL中的MVVC多版本并发控制机制的应用及实现
    本文介绍了MySQL中MVCC的应用及实现机制。MVCC是一种提高并发性能的技术,通过对事务内读取的内存进行处理,避免写操作堵塞读操作的并发问题。与其他数据库系统的MVCC实现机制不尽相同,MySQL的MVCC是在undolog中实现的。通过undolog可以找回数据的历史版本,提供给用户读取或在回滚时覆盖数据页上的数据。MySQL的大多数事务型存储引擎都实现了MVCC,但各自的实现机制有所不同。 ... [详细]
  • Java和JavaScript是什么关系?java跟javaScript都是编程语言,只是java跟javaScript没有什么太大关系,一个是脚本语言(前端语言),一个是面向对象 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决
    web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ... [详细]
  • Allegro总结:1.防焊层(SolderMask):又称绿油层,PCB非布线层,用于制成丝网印板,将不需要焊接的地方涂上防焊剂.在防焊层上预留的焊盘大小要比实际的焊盘大一些,其差值一般 ... [详细]
author-avatar
mobiledu2502931763
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有