zoukankan      html  css  js  c++  java
  • 读jQuery之二十(Deferred对象)--(转)

    原博文地址:http://www.cnblogs.com/snandy/archive/2012/12/19/2812935.html

    Deferred对象是由.Deferred.Deferred被实现为简单工厂模式

    它用来解决JS中的异步编程,它遵循 Common Promise/A 规范。实现此规范的还有 when.js 和 dojo

    $.Deferred作为新特性首次出现在版本1.5中,这个版本利用Deferred又完全重写了Ajax模块。

    $.Deferred在jQuery代码自身四处被使用,分别是promise方法、DOM readyAjax模块、动画模块。

    这里以版本1.8.3分析,由于1.7$.Callbacks从Deferred中抽离出去了,目前版本的deferred.js代码不过150行,而真正$.Deferred的实现只有100行左右。

    $.extend标示符$上挂了两个方法,如下

     1 jQuery.extend({
     2     Deferred: function( func ) {
     3         var tuples = [
     4                 // action, add listener, listener list, final state
     5                 [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
     6                 [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
     7                 [ "notify", "progress", jQuery.Callbacks("memory") ]
     8             ],
     9         ...
    10  
    11         // All done!
    12         return deferred;
    13     },
    14     // Deferred helper
    15     when: function( subordinate /* , ..., subordinateN */ ) {
    16         var i = 0,
    17             resolveValues = core_slice.call( arguments ),
    18             length = resolveValues.length,
    19             ....
    20  
    21         return deferred.promise();
    22     }
    23 });

    $.Deferred的实现

    1. 创建三个$.Callbacks对象,分别表示成功,失败,处理中三种状态
    2. 创建了一个promise对象,具有state、always、then、primise方法
    3. 通过扩展primise对象生成最终的Deferred对象,返回该对象

    $.when的实现

    1. 接受若干个对象,参数仅一个且非Deferred对象将立即执行回调函数
    2. Deferred对象和非Deferred对象混杂时,对于非Deferred对象remaining减1
    3. Deferred对象总数 = 内部构建的Deferred对象 + 所传参数中包含的Deferred对象
    4. 所传参数中所有Deferred对象每当resolve时remaining减1,直到为0时(所有都resolve)执行回调

    这就是.Deferred.when的全部了,各个方法及使用稍后介绍。

    代码阅读中会发现then和when方法的实现最难理解,看多次,后感回味无穷,非常巧妙。then内部会用到不同寻常的递归,when用到了计数,每次异步成功后减一,直到为0后表示全部异步操作成功,这时才可执行回调。

    上面提到Deferred里有3个$.Callbacks的实例,Deferred自身则围绕这三个对象进行更高层次的抽象。以下是Deferred对象的核心方法

    • done/fail/progress 是 callbacks.add,将回调函数存入
    • resolve/reject/notify 是 callbacks.fire,执行回调函数(或队列)

    下面举一些示例看看如何使用Deferred对象。

    一、done/resolve

    1 function cb() {
    2     alert('success')
    3 }
    4 var deferred = $.Deferred()
    5 deferred.done(cb)
    6 setTimeout(function() {
    7     deferred.resolve()
    8 }, 3000)

    在HTTP中表示后台返回成功状态(如200)时使用,即请求成功后可执行成功回调函数。

    二、fail/reject

    1 function cb() {
    2     alert('fail')
    3 }
    4 var deferred = $.Deferred()
    5 deferred.fail(cb)
    6 setTimeout(function() {
    7     deferred.reject()
    8 }, 3000)

    在HTTP中表示后台返回非成功状态时使用,即请求失败后可执行失败回调函数。

    三、progress/notify

    1 function cb() {
    2     alert('progress')
    3 }
    4 var deferred = $.Deferred()
    5 deferred.progress(cb)
    6 setInterval(function() {
    7     deferred.notify()
    8 }, 2000)

    在HTTP中表示请求过程中使用,即请求过程中不断执行回调函数。这可用在文件上传时的loading百分比或进度条。

    四、链式操作

     1 function fn1() {
     2     alert('success')
     3 }
     4 function fn2() {
     5     alert('fail')
     6 }
     7 function fn3() {
     8     alert('progress')
     9 }
    10 var deferred = $.Deferred()
    11 deferred.done(fn1).fail(fn2).progress(fn3) // 链式操作
    12 setTimeout(function() {
    13     deferred.resolve()
    14     //deferred.reject()
    15     //deferred.notify()
    16 }, 3000)

    这样可以很方便了添加成功,失败,进度回调函数。

    五,便利函数then,一次添加成功,失败,进度回调函数

     1 function fn1() {
     2     alert('success')
     3 }
     4 function fn2() {
     5     alert('fail')
     6 }
     7 function fn3() {
     8     alert('progress')
     9 }
    10 var deferred = $.Deferred()
    11 deferred.then(fn1, fn2, fn3)

    调用then后还可以继续链式调用then添加多个不同回调函数,这个then也正是jQuery对 Common Promise/A 的实现。

    六、使用always方法为成功,失败状态添加同一个回调函数

     1 var deferred = $.Deferred()
     2 deferred.always(function() {
     3     var state = deferred.state()
     4     if ( state === 'resolved') {
     5         alert('success')
     6     } else if (state === 'rejected') {
     7         alert('fail')
     8     }
     9 })
    10 setTimeout(function() {
    11     deferred.resolve()
    12     //deferred.reject()
    13 }, 3000)

    回调函数中可以使用deferred.state方法获取异步过程中的最终状态,这里我调用的是deferred.resolve,因此最后的状态是resolved,表示成功。

    七、when方法保证多个异步操作全部成功后才回调

     1 function fn1() {
     2     alert('done1')
     3 }
     4 function fn2() {
     5     alert('done2')
     6 }
     7 function fn3() {
     8     alert('all done')
     9 }
    10  
    11 var deferred1 = $.Deferred()
    12 var deferred2 = $.Deferred()
    13  
    14 deferred1.done(fn1)
    15 deferred2.done(fn2)
    16 $.when(deferred1, deferred2).done(fn3)
    17  
    18 setTimeout(function() {
    19     deferred1.resolve()
    20     deferred2.resolve()
    21 }, 3000)

    先后弹出了done1、done2、all done。 如果setTimeout中有一个reject了,fn3将不会被执行。

    八、deferred.promise()方法返回只能添加回调的对象,这个对象与$.Deferred()返回的对象不同,只能done/fail/progress,不能resolve/reject/notify。即只能调用callbacks.add,没有callbacks.fire。它是正统Deferred对象的阉割版。

    有了Deferred,我们使用jQuery书写ajax的风格可以这样了

    1 $.ajax(url)
    2  .done(success)
    3  .fail(fail)

    看似和以前比较也没什么优点,但它还可以添加多个回调

    1 $.ajax(url)
    2  .done(success1)
    3  .done(success2)
    4  .fail(fail2)
    5  .fail(fail2)

    1.5之前的则不行

    如果多个请求完成后才算成功,1.5之前的是无法解决的,现在则可以用$.when搞定

    1 var ajax1 = $.ajax(url1)
    2 var ajax2 = $.ajax(url2)
    3 $.when(ajax1, ajax2).done(success)

    如果项目中有一些异步问题不妨用用Derferred。

    相关:

    http://jimliu.net/?p=64

    http://www.infoq.com/cn/news/2011/09/js-promise

    http://www.erichynds.com/jquery/using-deferreds-in-jquery/

    http://sitr.us/2012/07/31/promise-pipelines-in-javascript.html

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

    原博文地址:http://www.cnblogs.com/snandy/archive/2012/12/19/2812935.html

  • 相关阅读:
    CentOS 7 配置 ISCSI 服务器
    CentOS 7 配置 http 服务器
    CentOS 7 配置 samba服务器
    ssh的两种连接方法(包括无密码访问)
    CentOS 7 破解mariadb密码
    Selenium2+python自动化53-unittest批量执行(discover)【转载】
    Selenium2+python自动化52-unittest执行顺序【转载】
    Selenium2+python自动化51-unittest简介【转载】
    selenium3+python自动化50-环境搭建(firefox)【转载】
    Selenium2+python自动化49-判断文本(text_to_be_present_in_element)【转载】
  • 原文地址:https://www.cnblogs.com/xx0405/p/5082848.html
Copyright © 2011-2022 走看看