Deferred的那些知识

2019-06-21 20:48:24 阅读：252 来源： 互联网

标签：function 动画知识那些 Deferred ajax done promise

在移动开发中的各种中，我们一定会遇到异步回调的问题，比如： 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是一种异步编程模型，通过一组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/ Aaron 文章： http://www.cnblogs.com/aaronjs/p/3169328.html

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

标签：function,动画,知识,那些,Deferred,ajax,done,promise
来源： https://blog.csdn.net/weixin_34208185/article/details/93230619

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Deferred的那些知识