Deferred的那些知识

墨蓝 2021-12-14 03:32 285阅读 0赞

在移动开发中的各种中，我们一定会遇到异步回调的问题，比如：

1：Css3执行动画完毕, 回调

2：Jquery Animate动画的执行完毕, 回调

3：Ajax的执行(并行、串行)，回调

等等

第一种情况：可以利用,Modernizr.js 封装了Css3动画完成的事件回调：

/*------通过Modernizr处理获得Css3结束的事件名-------*/
            var animEndEventNames = {
                'WebkitAnimation' : 'webkitAnimationEnd',
                'OAnimation' : 'oAnimationEnd',
                'msAnimation' : 'MSAnimationEnd',
                'animation' : 'animationend'
            };
    this.animEndEventName = animEndEventNames[Modernizr.prefixed('animation')];
    
    
    $("#Elemen").addClass("pt-page-current").addClass(optionClass.inClass).on(_this.animEndEventName, function() {
    
                            $(nextEle).off(_this.animEndEventName);
    
                            _this.endWithAnimationInit($(currentEle),$(nextEle));
                            _this.removeWithAnimationClass($(currentEle),$(nextEle),optionClass);
    
                            /*******开始ajax加载数据(设置图片阴影的效果)********/
                            _this.GestureAjax(_this.defaultOptions.nextJspPage,_this.defaultOptions.requestAjaxJsp);
    });

(第二种、第三种)情况，在jQuery中，很多的操作都返回的是Deferred或promise，如 `Animate`、 `Ajax`： ，如下：

// animate
    $('.box')
        .animate({
           'opacity': 0}, 1000)
        .promise()
        .then(function() {
            console.log('done');
        });
     
    // ajax
    $.ajax(options).then(success, fail);
    $.ajax(options).done(success).fail(fail);
     
    // ajax queue
    $.when($.ajax(options1), $.ajax(options2))
        .then(function() {
            console.log('all done.');
        }, function() {
            console.error('There something wrong.');
        });

**Deferred的定义**：

*  Deferred是基于[Promises/A][Promises_A],[Promises][]是一种异步编程模型，通过一组API来规范化异步操作，这样也能够让异步操作的流程控制更加容易
 *  由于Promises对于新手而言理解曲线还是比较陡峭的，这里循序渐进的给大家介绍，同时实现一个最简单的Promises/A代码
 *  Promises/A有个别名叫做“thenable”，就是“可以then”的。这里一个promise有三种状态：\[默认、完成、失败\]，初始创建的时候是默认状态，状态只可以从默认变成完成，或者默认变成失败。一旦完成或者失败，状态就不能再变定义的接口

**同步多个动画**

动画是另一个常见的异步任务范例。 然而在几个不相关的动画完成后执行代码仍然有点挑战性。

尽管在jQuery1.6中才提供了在动画元素上取得promise对象的功能，但它是很容易的手动实现：

$.fn.animatePromise = function( prop, speed, easing, callback ) { 
        var elements = this; 
        return $.Deferred(function( defer ) { 
            elements.animate( prop, speed, easing, function() { 
            defer.resolve(); 
            if ( callback ) { 
            callback.apply( this, arguments );
             } 
            }); 
        }).promise();
    };
    
    var fadeDiv1Out = $( "#div1" ).animatePromise({ opacity: 0 }), 
          fadeDiv2In = $( "#div1" ).animatePromise({ opacity: 1 }, "fast" ); 
    
    $.when( fadeDiv1Out, fadeDiv2In ).done(function() { 
         /* both animations ended */
     });

**JQuery Promie(Deffered) 注意：**

1、then支持延续任务调用方式（Continuation tasks），而done不支持

比如then可以这样用，而done不可以：

promise().then().then().then()

2. then会捕获未处理的异常然后把错误状态作为返回值返回，而done则会把异常直接抛出

**----文章推荐---：**

**Javascript Promise 启示录：**  [http://www.alloyteam.com/2014/05/javascript-promise-mode/][http_www.alloyteam.com_2014_05_javascript-promise-mode]

**Aaron 文章：**  [http://www.cnblogs.com/aaronjs/p/3169328.html][http_www.cnblogs.com_aaronjs_p_3169328.html]

转载于:https://www.cnblogs.com/Kummy/p/3948191.html

[Promises_A]: http://jimliu.net/Promises/A
[Promises]: http://wiki.commonjs.org/wiki/Promises
[http_www.alloyteam.com_2014_05_javascript-promise-mode]: http://www.alloyteam.com/2014/05/javascript-promise-mode/
[http_www.cnblogs.com_aaronjs_p_3169328.html]: http://www.cnblogs.com/aaronjs/p/3169328.html