Promise是CommonJS的規范之一，擁有resolve、reject、done、fail、then等方法，能夠幫助我們控制代碼的流程，避免函數的多層嵌套。如今異步在web開發中越來越重要，對于開發人員來說，這種非線性執行的編程會讓開發者覺得難以掌控，而Promise可以讓我們更好地掌控代碼的執行流程,jQuery等流行的js庫都已經實現了這個對象，年底即將發布的ES6也將原生實現Promise。
在javascript設計模式實踐之代理模式--圖片預加載中用代理模式實現了圖片預加載功能。
現在就更進一步，完成一個能夠一張一張的連續圖片加載的功能。
功能：
1.一張一張加載圖片。
2.加載錯誤，超時后顯示加載失敗圖片。
對于功能的要求，肯定會存在對加載狀態事件的處理以及完成時回調函數的處理，這樣不僅會造成代碼上的混亂，甚至破壞各種原則，就不再用普通的方法去寫了。針對這種狀態通知的特點，比較合適采用promise架構進行處理，promise本質上就是訂閱發布設計模式的一種，當前這個功能就用jquery自帶的promise進行開發。
1.完成一個加載圖片的代理創建函數，可以生成一個帶有加載超時、失敗、成功、取消監控能力的代理。
function createLoadImgProxy(){ var imgCache = new Image(); var dfd = $.Deferred(); var timeoutTimer; //開始加載超時監控，超時后進行reject操作 function beginTimeoutWatcher(){ timeoutTimer = setTimeout(function(){ dfd.reject('timeout'); }, 10000); } //結束加載超時監控 function endTimeoutWatcher(){ if(!timeoutTimer){ return; } clearTimeout(timeoutTimer); } //加載完成事件處理，加載完成后進行resolve操作 imgCache.onload = function(){ dfd.resolve(this.src); }; //加載終止事件處理，終止后進行reject操作 imgCache.onabort = function(){ dfd.reject("aborted"); }; //加載異常事件處理，異常后進行reject操作 imgCache.onerror = function(){ dfd.reject("error"); }; return function(eleImg, src){ dfd.always(function(){ //加載完成或加載失敗都要終止加載超時監控 endTimeoutWatcher(); }).done(function(src){ //加載完成后，往圖片元素上設置圖片 loadImg(eleImg, src); }).fail(function(msg){ //加載失敗后，往圖片元素上設置失敗圖片 loadImg(eleImg, 'loadFailed.jpg'); }); loadImg(eleImg, 'loading.gif'); imgCache.src = src; //開始進行超時加載監控 beginTimeoutWatcher(); return dfd.promise(); }; }其中，通過以下的方式創建了一個Deferred對象
Deferred對象通過resolve方法觸發完成事件，使用done方法響應完成事件。
加載成功時的完成事件。
以及加載完成時的響應處理，就是把圖片設到元素上，下面的代碼是上面鏈式寫法的拆解。
Defferred對象通過reject方法觸發拒絕事件，使用fail方法響應拒絕事件，表示加載失敗。
在加載超時，終止，異常時的拒絕事件。
//開始加載超時監控，超時后進行reject操作 function beginTimeoutWatcher(){ timeoutTimer = setTimeout(function(){ dfd.reject('timeout'); }, 10000); } //加載終止事件處理，終止后進行reject操作 imgCache.onabort = function(){ dfd.reject("aborted"); }; //加載異常事件處理，異常后進行reject操作 imgCache.onerror = function(){ dfd.reject("error"); };以及加載失敗時的響應處理，設置失敗圖片。
dfd.fail(function(msg){ //加載失敗后，往圖片元素上設置失敗圖片 loadImg(eleImg, 'loadFailed.jpg'); });在代理函數的最后，返回deferred的promise對象，用于給調用的地方監控加載的完成和失敗態，以便于下一張圖片的加載。
return dfd.promise();
2.一張一張的連續加載
//一張一張的連續加載圖片 //參數： // srcs: 圖片路徑數組 function doLoadImgs(srcs){ var index = 0; (function loadOneByOne(){ //退出條件 if(!(s = srcs[index++])) { return; } var eleImg = createImgElement(); document.getElementById('imgContainer').appendChild(eleImg); //創建一個加載代理函數 var loadImgProxy = createLoadImgProxy(); //在當前圖片加載或失敗后，遞歸調用，加載下一張 loadImgProxy(eleImg, s).always(loadOneByOne); })(); }做一個loadOneByOne的加載遞歸函數。
內部先創建一個加載代理，在代理加載完圖片，不管是成功還是失敗后，遞歸調用loadOneByOne函數加載下一張圖片。
關鍵就在于代理函數返回的promise對象，使用.always方法可在加載完成后（成功或失敗）進行loadOneByOne遞歸調用加載下一張。
至此完成。
采用了promise模式后，callback函數不見了，維護狀態的函數和內部變量也不見了，代碼更清晰簡單，使得代理函數和本地函數之間的一致性得到保護。
完整代碼：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> </head> <body> <button id='btnLoadImg'>加載圖片</button> <br> <div id='imgContainer'> </div> <br> <script type='text/javascript' src="./jquery-1.11.3.min.js"></script> <script type='text/javascript'> var imgSrcs = [ 'http://img.wanchezhijia.com/A/2015/3/20/17/11/de63f77c-f74f-413a-951b-5390101a7d74.jpg', 'http://www.newbridgemotorsport.com/files/6413/9945/0406/IMG_3630.jpg', 'http://www.carsceneuk.com/wp-content/uploads/2015/03/88y9989.jpg', 'http://mfiles.sohu.com/20130223/5ff_403b2e7a_7a1f_7f24_66eb_79e3f27d58cf_1.jpg', 'http://img1.imgtn.bdimg.com/it/u=2678963350,1378052193&fm=21&gp=0.jpg' ]; $(document).ready(function(){ $('#btnLoadImg').bind('click', function(){ doLoadImgs(imgSrcs); }); }); //創建img標簽 //這里用自執行函數加一個閉包，是為了可以創建多個id不同的img標簽。 var createImgElement = (function(){ var index = 0; return function() { var eleImg = document.createElement('img'); eleImg.setAttribute('width', '200'); eleImg.setAttribute('heght', '150'); eleImg.setAttribute('id', 'img' + index++); return eleImg; }; })(); function loadImg(img, src) { img.src = src; } function createLoadImgProxy(){ var imgCache = new Image(); var dfd = $.Deferred(); var timeoutTimer; //開始加載超時監控，超時后進行reject操作 function beginTimeoutWatcher(){ timeoutTimer = setTimeout(function(){ dfd.reject('timeout'); }, 10000); } //結束加載超時監控 function endTimeoutWatcher(){ if(!timeoutTimer){ return; } clearTimeout(timeoutTimer); } //加載完成事件處理，加載完成后進行resolve操作 imgCache.onload = function(){ dfd.resolve(this.src); }; //加載終止事件處理，終止后進行reject操作 imgCache.onabort = function(){ dfd.reject("aborted"); }; //加載異常事件處理，異常后進行reject操作 imgCache.onerror = function(){ dfd.reject("error"); }; return function(eleImg, src){ dfd.always(function(){// alert('always end'); //加載完成或加載失敗都要終止加載超時監控 endTimeoutWatcher(); }).done(function(src){// alert('done end'); //加載完成后，往圖片元素上設置圖片 loadImg(eleImg, src); }).fail(function(msg){// alert('fail end:' + msg); //加載失敗后，往圖片元素上設置失敗圖片 loadImg(eleImg, 'loadFailed.jpg'); }); loadImg(eleImg, 'loading.gif'); imgCache.src = src; //開始進行超時加載監控 beginTimeoutWatcher(); return dfd.promise(); }; } //一張一張的連續加載圖片 //參數： // srcs: 圖片路徑數組 function doLoadImgs(srcs){ var index = 0; (function loadOneByOne(){ //退出條件 if(!(s = srcs[index++])) { return; } var eleImg = createImgElement(); document.getElementById('imgContainer').appendChild(eleImg); //創建一個加載代理函數 var loadImgProxy = createLoadImgProxy(); //在當前圖片加載或失敗后，遞歸調用，加載下一張 loadImgProxy(eleImg, s).always(loadOneByOne); })(); } </script> </body></html>新聞熱點
疑難解答
