JQUERY延迟对象

API:   http://www.css88.com/jqapi-1.9/category/deferred-object/

异步编程的处理

JavaScript的执行流程是分为"同步"与"异步"

传统的异步操作会在操作完成之后,使用回调函数传回结果,而回调函数中则包含了后续的工作。这也是造成异步编程困难的主要原因:

我们一直习惯于“线性”地编写代码逻辑,但是大量异步操作所带来的回调函数,会把我们的算法分解地支离破碎。

嵌套式回调

动画为例,下一个动画要等上一个执行完毕才可以继续,流程就会写到回调里面

//执行多个动画
$(‘ele1‘).animate({
    opacity: ‘.5‘
}, 4000, function() {
    $(‘ele2‘).animate({
        width: ‘100px‘
    }, 2000, function() {
        $(‘ele3‘).animate({
            height: ‘0‘
        }, 2000);
    });
});

上面的代码编程逻辑也是正确的,但是针对这样的异步嵌套的回调逻辑,当我们的嵌套越多,代码结构层级会变得越来越深。首先是阅读上会变得困难,其次是强耦合,接口变得不好扩展。我们需要一种模式来解决这种问题,这就是Promises所要做的事情。

为了让前端们从回调的地狱中回到天堂, jQuery 也引入了 Promise 的概念。 Promise 是一种令代码异步行为更加优雅的抽象,有了它,我们就可以像写同步代码一样去写异步代码。这个东东看起来很复杂,实际上我们只要抓住核心的使用就可以了

观察右边代码:

通过$.Deferred处理过的代码,很明显没有了回调的嵌套,虽然代码量看起来多了点,但是实际上,每一个代码执行部分都被封装了起来,只留了Deferred的接口处理了,等于是我们把执行的流程控制交给了Deferred,这样的好处就是我们在写嵌套函数的时候,可以用deferred提供的管道风格编写同步代码了

dtd.then(function() {
   //操作1
}).then(function() {
   //操作2
}).then(function() {
  //操作3
})

这里要了解3个步骤

var dtd = $.Deferred();  //创建
dtd.resolve();          //成功
dtd.then()              //执行回调
时间: 2024-10-13 07:27:20

JQUERY延迟对象的相关文章

jquery源码解析:jQuery延迟对象Deferred(工具方法)详解2

请接着上一课继续看. $.Deferred()方法中,有两个对象,一个是deferred对象,一个是promise对象. promise对象有以下几个方法:state,always,then,promise,pipe,done,fail,progress. deferred对象除了有promise对象的所有方法外(通过jQuery.extend( obj, promise ),把promise对象的所有方法复制到deferred对象中),还有其他三个:resolve,reject,notify.

jquery源码解析:jQuery延迟对象Deferred(工具方法)详解1

请先看上一课的回调对象.Deferred是通过extend添加到jQuery中的工具方法.如下所示: jQuery.extend({ Deferred: function( func ) { }, when: function( subordinate /* , ..., subordinateN */ ) { }}); 首先,来介绍下Deferred的使用: var cb = $.Deferred(); setTimeout(function(){ alert(1); cb.resolve()

jQuery 延迟对象源码

Deferred延迟对象 jQuery.extend({ Deferred : function () { ; } when : function () { ; } }); 扩展了2个工具方法.延迟对象,是基于回调函数开发的.$.Deferred(); -> $.Callbacks();$.when(); 复习一下Callbacks: 例子(1) var cb = $.Callbacks(); setTimeout(function () { alert(111); cb.fire(); },

Jquery 延迟对象

延迟对象,在jQuery的1.5引入,是通过调用jQuery.Deferred()方法创建一个可链式调用的工具对象. 它可以注册多个回调到回调队列, 调用回调队列,准备代替任何同步或异步函数的成功或失败状态. deferred.alway() 当Deferred(延迟)对象解决或拒绝时,调用添加处理程序. deferred.always( alwaysCallbacks [, alwaysCallbacks ] ) 参数 alwaysCallbacks 类型 : 一个函数或函数数组 例子: 1

jQuery 源码: 延迟对象补充。

// Deferred helper (3132)when 是延迟对象 Deferred的一个辅助方法. var dfd = $.Deferred(); //创建延迟对象 dfd.done(); dfd.fail(); //使用: $.when().done(); $.when().fail();   when的返回值,是一个延迟对象. 源码: return deferred.promise(); 举个例子:when可以等待多个延迟对象都成功后,触发成功.例子:(1) 成功必须多个都成功. fu

jQuery源码 02--(3043 , 3183) Deferred : 延迟对象 : 对异步的统一管理

//延迟对象 jQuery.extend({ Deferred: function( func ) { var tuples = [//resolve完成.reject未完成.notify进行中类似于fire,done.fail.progress回调函数的方法类似于add,jQuery.Callbacks()创建回调对象实现回调方法.映射数组. // action, add listener, listener list, final state [ "resolve", "

jQuery的延迟对象

之前看别人的demo,发现在延迟对象被resolve时要执行的代码,有时会写在deferred.then方法里执行,有时会写在deferred.done方法里执行. 这让对延迟对象一知半解的我非常困惑,今天抽时间研究了一下下,发现:在某种环境下,两个方法的确能实现同样的效果. 这种特定的环境是怎样呢? 先看一下deferred.done的用法: // 创建deferred对象 var dtd = $.Deferred(); // 解决deferred对象 dtd.resolve('finish'

javascript --- jQuery --- Deferred对象

javascript --- jQuery --- Deferred对象 javascript的函数式编程是多么引人入胜,jQuery使代码尽可能的精简,intelligent! defer - 必应词典:v.迁延:听从:扣存:[军]使延期入伍所以deferred对象的含义就是"延迟"到未来某个点再执行. jQuery的官方文档给出了用jQuery.ajax()发送请求的基本方式http://api.jquery.com/jQuery.ajax/Example: Save some d

JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

JavaScript学习总结(一)--延迟对象.跨域.模板引擎.弹出层.AJAX示例 目录 一.AJAX示例 1.1.优点 1.2.缺点 1.3.jQuery AJAX示例 二.延迟对象(Deferred) 2.1.回调函数 2.2.deferred.done 三.跨域 3.1.什么是跨域 3.2.JSONP跨域 3.3.jQuery使用JSONP跨域 3.4.跨域资源共享(CORS) 3.5.小结 四.弹出层 五.模板引擎 5.1.Hello World 5.2.方法 5.3.与AJAX结合应