Jquery promise实现一张一张加载图片
Promise是CommonJS的规范之一，拥有resolve、reject、done、fail、then等方法，能够帮助我们控制代码的流程，避免函数的多层嵌套。如今异步在web开发中越来越重要，对于开发人员来说，这种非线性执行的编程会让开发者觉得难以掌控，而Promise可以让我们更好地掌控代码的执行流程,jQuery等流行的js库都已经实现了这个对象，年底即将发布的ES6也将原生实现Promise。
在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能。
现在就更进一步，完成一个能够一张一张的连续图片加载的功能。
功能：
1.一张一张加载图片。
2.加载错误，超时后显示加载失败图片。
对于功能的要求，肯定会存在对加载状态事件的处理以及完成时回调函数的处理，这样不仅会造成代码上的混乱，甚至破坏各种原则，就不再用普通的方法去写了。针对这种状态通知的特点，比较合适采用promise架构进行处理，promise本质上就是订阅发布设计模式的一种，当前这个功能就用jquery自带的promise进行开发。
1.完成一个加载图片的代理创建函数，可以生成一个带有加载超时、失败、成功、取消监控能力的代理。
functioncreateLoadImgProxy(){
varimgCache=newImage();
vardfd=$.Deferred();
vartimeoutTimer;
//开始加载超时监控，超时后进行reject操作
functionbeginTimeoutWatcher(){
timeoutTimer=setTimeout(function(){
dfd.reject('timeout');
},10000);
}
//结束加载超时监控
functionendTimeoutWatcher(){
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");
};
returnfunction(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();
returndfd.promise();
};
}
其中，通过以下的方式创建了一个Deferred对象
vardfd=$.Deferred();
Deferred对象通过resolve方法触发完成事件，使用done方法响应完成事件。
加载成功时的完成事件。
imgCache.onload=function(){
dfd.resolve(this.src);
};
以及加载完成时的响应处理，就是把图片设到元素上，下面的代码是上面链式写法的拆解。
dfd.done(function(src){
//加载完成后，往图片元素上设置图片
loadImg(eleImg,src);
});
Defferred对象通过reject方法触发拒绝事件，使用fail方法响应拒绝事件，表示加载失败。
在加载超时，终止，异常时的拒绝事件。
//开始加载超时监控，超时后进行reject操作
functionbeginTimeoutWatcher(){
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对象，用于给调用的地方监控加载的完成和失败态，以便于下一张图片的加载。
returndfd.promise();
2.一张一张的连续加载
//一张一张的连续加载图片
//参数：
//srcs:图片路径数组
functiondoLoadImgs(srcs){
varindex=0;
(functionloadOneByOne(){
//退出条件
if(!(s=srcs[index++])){
return;
}
vareleImg=createImgElement();
document.getElementById('imgContainer').appendChild(eleImg);
//创建一个加载代理函数
varloadImgProxy=createLoadImgProxy();
//在当前图片加载或失败后，递归调用，加载下一张
loadImgProxy(eleImg,s).always(loadOneByOne);
})();
}
做一个loadOneByOne的加载递归函数。
内部先创建一个加载代理，在代理加载完图片，不管是成功还是失败后，递归调用loadOneByOne函数加载下一张图片。
关键就在于代理函数返回的promise对象，使用.always方法可在加载完成后（成功或失败）进行loadOneByOne递归调用加载下一张。
loadImgProxy(eleImg,s).always(loadOneByOne);
至此完成。
采用了promise模式后，callback函数不见了，维护状态的函数和内部变量也不见了，代码更清晰简单，使得代理函数和本地函数之间的一致性得到保护。
完整代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
</head>
<body>
<buttonid='btnLoadImg'>加载图片</button>
<br>
<divid='imgContainer'>
</div>
<br>
<scripttype='text/javascript'src="./jquery-1.11.3.min.js"></script>
<scripttype='text/javascript'>
varimgSrcs=[
'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标签。
varcreateImgElement=(function(){
varindex=0;
returnfunction(){
vareleImg=document.createElement('img');
eleImg.setAttribute('width','200');
eleImg.setAttribute('heght','150');
eleImg.setAttribute('id','img'+index++);
returneleImg;
};
})();
functionloadImg(img,src){
img.src=src;
}
functioncreateLoadImgProxy(){
varimgCache=newImage();
vardfd=$.Deferred();
vartimeoutTimer;
//开始加载超时监控，超时后进行reject操作
functionbeginTimeoutWatcher(){
timeoutTimer=setTimeout(function(){
dfd.reject('timeout');
},10000);
}
//结束加载超时监控
functionendTimeoutWatcher(){
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");
};
returnfunction(eleImg,src){
dfd.always(function(){
//alert('alwaysend');
//加载完成或加载失败都要终止加载超时监控
endTimeoutWatcher();
}).done(function(src){
//alert('doneend');
//加载完成后，往图片元素上设置图片
loadImg(eleImg,src);
}).fail(function(msg){
//alert('failend:'+msg);
//加载失败后，往图片元素上设置失败图片
loadImg(eleImg,'loadFailed.jpg');
});
loadImg(eleImg,'loading.gif');
imgCache.src=src;
//开始进行超时加载监控
beginTimeoutWatcher();
returndfd.promise();
};
}
//一张一张的连续加载图片
//参数：
//srcs:图片路径数组
functiondoLoadImgs(srcs){
varindex=0;
(functionloadOneByOne(){
//退出条件
if(!(s=srcs[index++])){
return;
}
vareleImg=createImgElement();
document.getElementById('imgContainer').appendChild(eleImg);
//创建一个加载代理函数
varloadImgProxy=createLoadImgProxy();
//在当前图片加载或失败后，递归调用，加载下一张
loadImgProxy(eleImg,s).always(loadOneByOne);
})();
}
</script>
</body>
</html>