JavaScript的執行流程是分為"同步"與"異步"
傳統的異步操作會在操作完成之后,使用回調函數傳回結果,而回調函數中則包含了后續的工作。這也是造成異步編程困難的主要原因:
我們一直習慣于“線性”地編寫代碼邏輯,但是大量異步操作所帶來的回調函數,會把我們的算法分解地支離破碎。
嵌套式回調
動畫為例,下一個動畫要等上一個執行完畢才可以繼續,流程就會寫到回調里面
//執行多個動畫 $('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個步驟
var dtd = $.Deferred(); //創建
dtd.resolve(); //成功
dtd.then() //執行回調
具體的我們可以參考下jQuery的Deferred部分的API說明,點擊此處
我們將會在下一節,用jQuery的Deferred去改造代碼的執行流程
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報