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()指定的回調函數有返回值,該返回值會做爲參數,傳入後面的回調函數。

相關文章
相關標籤/搜索