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对象
复制代码 代码如下:
var dfd = $.Deferred();
Deferred对象通过resolve方法触发完成事件，使用done方法响应完成事件。
加载成功时的完成事件。
复制代码 代码如下:
imgCache.onload = function(){
dfd.resolve(this.src);
};
以及加载完成时的响应处理，就是把图片设到元素上，下面的代码是上面链式写法的拆解。
复制代码 代码如下:
dfd.done(function(src){
//加载完成后，往图片元素上设置图片
loadImg(eleImg, src);
});
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.一张一张的连续加载