课程咨询 :0551-64632520

合肥web前端培训

合肥web培训 > 达内新闻 > jQuery Deferred概念及使用
  • jQuery Deferred概念及使用

    发布:合肥web培训      来源:达内新闻      时间:2016-05-25

  • jQuery 的 Deferred 是用来组织异步代码的。合肥达内web培训专家详细的说下jQuery Deferred使用方法。

    基本写法
     
    1.创建 Deferred 对象 var dfd = $.Deferred();
    2.创建 Promise 对象 var promise = dfd.promise();
    3.异步代码执行后,若成功,在 Deferred 对象上执行 dfd.resolve(data),失败则执行 dfd.reject(error)
    4.当执行 dfd.resolve(data) 后,框架代码会执行 promise.done(data);执行 dfd.reject(error) 后框架代码会执行 promise.fail(data)。

    示例代码如下

    function doThingA() {
        var dfd = $.Deferred(); // 创建 Deferred 对象
        /*
         * 一些异步代码
         * 异步回来后
         * 若成功则执行 dfd.resolve(data)
         * 若失败则执行 dfd.reject(error)
         */
        return dfd.promise();
    }
    /*
    *  doThingA 中执行 dfd.resolve 后执行 successFn
    *  doThingA 中执行 dfd.reject 后执行 failFn
    *  doThingA 中执行 dfd.resolve 或 dfd.reject 均执行 alwaysFn
    */
    doThingA.done(successFn).fail(failFn).always(alwaysFn);

        jQuery 的 $.ajax 返回的就是一个 Promise 对象。如

    $.ajax({
      //...
    }).done(successFn).fail(failFn);

    下面达内web培训专家结合具体情况介绍jQuery Deferred。

    串行的异步操作
     
    假设要执行 n 个异步操作。其中第 n 个操作要在第 n - 1 个操作完成后才能执行。我们可能会这么写

    /*
    * 异步回来后 若成功则执行successFn,失败执行 failFn
    */
    function doTing1(successFn, failFn){
    }
    function doTing2(successFn, failFn){
    }
    // ...
    /*
    * dataArr 为 doTing1,doTing2 ... 执行操作拿到的数据
    */
    function doTingN(dataArr){
    }

    doThing1(function(data1){
      var dataArr = [];
      dataArr.push(data1);
      doThing2(function(data2){
          dataArr.push(data2);
          //嵌套很多层 ... doThingN(dataArr)
      }, doTing2FailFn);
    }, doTing1FailFn);


    如果用 Deferred 这么写

    function doThing1() {
        var dfd = $.Deferred();
        /*
        * 一些异步代码
        * 异步回来后
        * 若成功则执行 dfd.resolve(data)
        * 若失败则执行 dfd.reject(error)
        */
        return dfd.promise();
    }

    function doThing2(data) {
        dataArr.push(data);
        var dfd = $.Deferred();
        /*
        * 一些异步代码
        * 异步回来后
        * 若成功则执行 dfd.resolve(data)
        * 若失败则执行 dfd.reject(error)
        */
        return dfd.promise();
    }

    // ...
    function doTingN(dataArr){
    }

    var dataArr = [];

    doThing1()
      .done(doThing2).fail(doTing1FailFn)
      .done(doThing3).fail(doTing2FailFn)
      // ...
      .done(doThingN).fail(doTingNMinus1FailFn);

    相比前一个方法,清爽了很多。

    并行的异步操作
     
    假设要执行 n 个异步操作。第 1 到 n - 1 个操作可以并行执行。第 n 个操作要在前 n - 1 个操作完成后才能执行。我们可能会这么写

    var totalAysnNum = n;
    var executedAysnNum = 0;
    var dataArr = [];
    /*
    * 异步回来后 若成功则执行successFn,失败执行 failFn
    */
    function doTing1(successFn, failFn){
       /*
        * 一些异步代码
        * 异步回来后
        * 若成功则执行
        executedAysnNum++;
        data[0] = data;
        if(executedAysnNum === totalAysnNum){
          successFn(dataArr)
        }
        * 若失败则执行 failFn
        */
    }
    function doTing2(successFn, failFn){
    /*
        * 一些异步代码
        * 异步回来后
        * 若成功则执行
        executedAysnNum++;
        data[1] = data;
        if(executedAysnNum === totalAysnNum){
          successFn(dataArr)
        }
        * 若失败则执行 failFn
        */
    }
    // ...
    /*
    * dataArr 为 doTing1,doTing2 ... 执行操作拿到的数据
    */
    function doTingN(dataArr){
    }

    doThing1(doTingN, failFn);
    doThing2(doTingN, failFn);
    // ...

    如果用 Deferred 这么写

    function doThing1() {
        var dfd = $.Deferred();
        /*
        * 一些异步代码
        * 异步回来后
        * 若成功则执行 dfd.resolve(data)
        * 若失败则执行 dfd.reject(error)
        */
        return dfd.promise();
    }

    function doThing2() {
        var dfd = $.Deferred();
        /*
        * 一些异步代码
        * 异步回来后
        * 若成功则执行 dfd.resolve(data)
        * 若失败则执行 dfd.reject(error)
        */
        return dfd.promise();
    }

    // ...
    function doTingN(data1, data2 ...){
    }

    $.when(doThing1, doThing2, ..., doThingN)
      .done(doTingN).fail(failFn);

    串行与并行的混合
     
    假设要执行 4 个异步操作。第 1 个和第 2 个操作可以并行执行,然后执行第 3 个,然后执行第 4 个。用 Deferred 这么写

    $.when(doThing1, doThing2)
      .done(doThing3)
      .done(doThing4);

    jQuery Defferred 的一些具体 Demo
     
    // 让某元素淡出后淡入
    $('.tar').fadeOut().promise().done(function() {
        $('.tar').fadeIn();
    });
    // 让某元素淡出后,1 秒后淡入
    $('.tar').fadeOut().delay(1000).fadeIn();

    推荐文章

上一篇:聊聊Ajax的优缺点

下一篇:浅析::after,::before伪元素制作动画效果

最新开班日期  |  更多

WEB零基础全日制班

WEB零基础全日制班

开班日期:1-20

WEB零基础周末班

WEB零基础周末班

开班日期:1-20

WEB前端业余班

WEB前端业余班

开班日期:1-20

WEB前端就业班

WEB前端就业班

开班日期:1-20

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632520     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56