`
p2world
  • 浏览: 95614 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery Deferred 回调 最简 教程

阅读更多
Deferrd是jQuery提供的回调方法包装类。

以下内容摘自jQuery Api 1.7
function asyncEvent() {
    var dfd = new jQuery.Deferred();

    // Resolve after a random interval
    setTimeout(function () {
        dfd.resolve("hurray"); //触发成功事件 | 被done注册的函数
    }, Math.floor(400 + Math.random() * 2000));

    // Reject after a random interval
    setTimeout(function () {
        dfd.reject("sorry"); //触发失败事件 | 被fail注册的函数
    }, Math.floor(400 + Math.random() * 2000));

    // Show a "working..." message every half-second
    setTimeout(function working() {
        if (dfd.state() === "pending") {
            dfd.notify("working... "); //触发progress事件
            setTimeout(working, 500);
        }
    }, 1);//精彩的代码
    // Return the Promise so caller can't change the Deferred
    return dfd.promise(); //删掉用于触发的方法:reject,resolve,notify
}

asyncEvent().done(function () {
    console.log('成功');
}).fail(function () {
    console.log('失败');
}).always(function () {
    console.log('不管成败,反正是结束了');
}).progress(function () {
    console.log('you got a message~');
});


还有一些方便使用的函数:$.when(dfd1,[dfd2,[dfd3]]),他返回的还是Deferrd对象。当传入的所有dfd都成功后,才会触发done事件。当任意一个dfd失败,立即触发fail


var a=$.Deferred();
var b=$.Deferred();

$.when(a,b)
.fail(function(){console.log('失败');})
.done(function(){console.log('成功');});

b.resolve()
a.resolve()
//输出:成功


var a=$.Deferred();
var b=$.Deferred();

$.when(a,b)
.fail(function(){console.log('失败');})
.done(function(){console.log('成功');});

b.reject()
//输出:失败


then是一个快捷方法:dfd.then(doneCallback,failCallback,[progressCallback]);

还有:在所有的触发用方法都可以传递一个参数
// Attach a done, fail, and progress handler for the asyncEvent
$.when(asyncEvent()).then(function (status) { //注册成功回调,done
    console.log(status + ', things are going well');
}, function (status) { //注册失败回调,fail
    console.log(status + ', you fail this time');
}, function (status) { //注册progress回调。1.7新增
    $("body").append(status);
});



最后说精彩的代码:http://p2world.iteye.com/blog/1405227

http://p2world.iteye.com/blog/1405238
分享到:
评论

相关推荐

    谈谈jQuery之Deferred源码剖析

    jQuery的Deferred对象是jQuery在ES6的Promise概念出现之前的一种实现,它允许开发者将异步操作的结果通过链式调用的方式处理,避免了传统的层层嵌套的回调函数的写法,让代码的可读性和可维护性更高。 - **Deferred...

    jquery Deferred 快速解决异步回调的问题

    jQuery Deferred 是一个强大的工具,它解决了JavaScript中异步编程的一大挑战——回调地狱。在JavaScript的异步编程中,我们通常需要处理多个回调函数,当这些回调嵌套过深时,代码可读性和维护性会显著降低。jQuery...

    jQuery的deferred对象使用详解

    jQuery中的deferred对象是自jQuery 1.5.0版本引入的一种新特性,旨在解决JavaScript中异步操作的回调函数管理问题。deferred对象可以看作是一种特殊的对象,它允许你延迟到某个未来时刻执行某项操作。它是jQuery的回...

    jQuery的deferred对象详解

    4. 多回调支持:同一个deferred对象可以关联多个回调函数,并且这些回调函数可以是针对不同的事件,如操作成功或操作失败。这为开发者提供了极大的灵活性。 在实际应用中,deferred对象的使用通常伴随着其三个状态...

    jquery-deferred-images:加载所选图像后执行回调

    jQuery 延迟图像 加载所选图像后执行回调。 (请注意,这可能不适用于跨浏览器,请参阅: ://api.jquery.com/load-event/)安装手动或使用凉亭下载: $ bower install jquery-deferred-images示例用法 $ ( 'img' ) ....

    jQuery中的deferred对象和extend方法详解

    `deferred对象`是jQuery 1.5.0版本引入的,它提供了一种更优雅的方式来管理回调函数,解决了传统的回调地狱问题。而`extend方法`则用于合并对象属性,增强了对象的可扩展性。 ### Deferred对象 `deferred对象`的...

    2014-10-16-深入理解jQuery(4)——Deferred1

    jQuery.Callbacks是jQuery中的一种回调函数解决方案,它可以使得回调函数变得更加简洁和易于维护。Deferred对象的实现机制是将回调函数分离出来,使得代码更加简洁和易于维护。 3. promise源码分析 promise对象是...

    在jQuery 1.5中使用deferred对象的代码(翻译)

    总之,Deferred对象是jQuery 1.5引入的一个强大特性,它极大地简化了JavaScript中的异步编程模型,使得异步操作的管理和回调函数的注册变得更加简洁和直观。通过对Deferred对象和Promise对象的理解和应用,开发者...

    jQuery通过deferred对象管理ajax异步

    Deferred对象可以被看作是一个容器,用于存放异步操作的结果,它提供了一种统一的方法来处理成功或失败的回调,以及设置多个回调的能力。 deferred对象支持三种状态:未完成(pending)、已完成(resolved)和已...

    jQuery中deferred对象使用方法详解

    在jquery1.5之后的版本中,加入了一个deferred对象,也就是延迟对象,用来处理未来某一时间点发生的回调函数。同时,还改写了ajax方法,现在的ajax方法返回的是一个deferred对象。 那就来看看deferred对象的用法。 1...

    jquery教程及API文档

    jQuery的动画功能强大,如`$("#elem").fadeIn()`让元素渐显,`$("#elem").slideUp()`使元素滑动隐藏,`$("#elem").animate({property: value}, duration, easing, callback)`则可自定义动画效果,指定属性变化、持续...

    jquery基础教程之deferred对象使用方法

    在jQuery中,`deferred`对象是一个非常重要的概念,它主要用来处理异步操作和回调函数,提供了一种更优雅的方式来组织和管理异步代码。`deferred`对象的引入是为了增强jQuery对异步编程的支持,尤其是在处理多个异步...

    HTML+CSS3+JS+JQuery实现七夕言情动画、面向对象程序设计、Deferred对象解决异步编程回调嵌套问题

    本篇文章将详细讲解如何利用这些技术实现七夕言情动画,以及面向对象程序设计和 Deferred 对象在解决异步编程回调嵌套问题中的应用。 首先,我们来看HTML和CSS3在七夕言情动画中的应用。HTML(超文本标记语言)是...

    在jQuery1.5中使用deferred对象 着放大镜看Promise

    在jQuery 1.5中,`Deferred`对象的引入是为了更好地处理异步操作,特别是与AJAX请求相关的回调。`Deferred`对象是基于Promise模式的一种实现,它允许开发者以链式调用的方式组织异步代码,提高了代码的可读性和可...

    深入解析jQuery中Deferred的deferred.promise()方法

    在这个例子中,`deferred.resolve()` 会触发 `doSomething` 函数中 `promise.done()` 回调的执行,但外部代码无法直接调用 `deferred.resolve()` 或 `deferred.reject()`。 `deferred.promise()` 方法还可以接受一...

    jQuery中借助deferred来请求及判断AJAX加载的实例讲解

    总结来说,jQuery中的`deferred`对象通过提供一种更高级别的抽象来简化异步编程,使我们能够更好地管理和控制异步操作,避免回调地狱,提高代码的可读性和可维护性。无论是用于处理AJAX请求的顺序执行,还是监控资源...

    jQuery.deferred对象使用详解

    无论是本地操作还是远程操作,同步还是异步,都可以使用deferred对象来指定回调函数。如下是一个耗时操作的示例: ```javascript var dfd = $.Deferred(); // 创建一个deferred对象 var wait = function(dtd) { ...

Global site tag (gtag.js) - Google Analytics