for循环、ajax、递归的综合应用

本人在开发中遇到的一个问题，在每次刷新页面的时候时候需要请求下载图片。但是需要下载图片的地方很多，页面用ejs刷新又很快，所以只能用循环所有需要下载图片的dom，然后发送请求在进行img标签渲染。但是这样有一个问题，for循环速度很快，ajax请求又很慢，所以直接异步请求会导致dom的索引和要添加图片dom索引不能对应，只是能对应最后一个。再往查了很多方案，大部分建议都是ajax请求同步

function img() {
　　for (var i = 0; i < $('[data-logo-name]').length;i++) {
　　　　var key = $('[data-value]').eq(i).data('logo-value');
　　　　if(key) {
　　　　　　$.ajax({
　　　　　　　　url: '/crm/api/imgbykey',
　　　　　　　　type: 'GET',
　　　　　　　　dataType: 'json',
　　　　　　　　data: {
　　　　　　　　　　key: key
　　　　　　　　},
　　　　　　　　async: false
　　　　　　}).done(function(resp) {
　　　　　　　　if(resp.errNum == 0) {
　　　　　　　　　　$('[data-name="shop_logo_name"]').eq(i).prepend('<img src="' + resp.img + '">');
　　　　　　　　} else {
　　　　　　　　　　Utils.showErr(null, resp.retMsg || resp.errmsg || '获取图片失败！');
　　　　　　　　}
　　　　　　});
　　　　}
　　}
}

但是同步会有一个问题，就当要渲染的部分下面还有模块，或者要渲染的部分图片太多就会导致页面假死，影响用户体验，所以同步的方案有局限性，但是也可以使用，本人觉得适合范围过小，不合理，故采用递归的方法实现

function getShoplogo() {
　　var arrKey = [];
　　var j = 0;
　　for (var i = 0; i < $('[data-logo-name]').length;i++) {
　　　　var key = $('[data-value]').eq(i).data('logo-value');
　　　　arrKey.push(key);
　　}
　　aa();
　　function aa() {
　　　　if(arrKey.length > 0) {
　　　　　　if (j > arrKey.length) {
　　　　　　　　return;
　　　　　　}
　　　　　　$.ajax({
　　　　　　　　url: '/crm/api/imgbykey',
　　　　　　　　type: 'GET',
　　　　　　　　dataType: 'json',
　　　　　　　　data: {
　　　　　　　　　　key: arrKey[j]
　　　　　　　　}
　　　　　　　　}).done(function(resp) {
　　　　　　　　　　if(resp.errNum == 0) {
　　　　　　　　　　　　$('[data-name="shop_logo_name"]').eq(j).prepend('<img src="' + resp.img + '">');
　　　　　　　　　　} else {
　　　　　　　　　　　　Utils.showErr(null, resp.retMsg || resp.errmsg || '获取图片失败！');
　　　　　　　　　　}
　　　　　　　　　　j++;
　　　　　　　　　　if (j < arrKey.length) {
　　　　　　　　　　　　aa();
　　　　　　　　　　}
　　　　　　});
　　　　}
　　}
}
getShoplogo();

这个方案可以解决上述问题了，希望对有需要的小伙伴有帮助，也希望大家给出更好的方案，一起交流学习