JQUERY延迟对象

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

 

异步编程的处理

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

传统的异步操做会在操做完成以后,使用回调函数传回结果,而回调函数中则包含了后续的工做。这也是形成异步编程困难的主要缘由:算法

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

嵌套式回调编程

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

//执行多个动画
$('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个步骤code

var dtd = $.Deferred();  //建立
dtd.resolve();          //成功
dtd.then()              //执行回调

在jQuery 1.8以前,then()只是.done().fail()写法的语法糖,两种写法是等价的。在jQuery 1.8以后,then()返回一个新的deferred对象,而done()返回的是原有的deferred对象。若是then()指定的回调函数有返回值,该返回值会做为参数,传入后面的回调函数。

相关文章
相关标签/搜索