问题思考

在不使用ES6的前提下如何将一个多个异步请求按顺序执行呢？
比如：

 var imgUrls = [
     'http://www.xxx.com/1.jpg',
     'http://www.xxx.com/2.jpg',
     'http://www.xxx.com/3.jpg',
     'http://www.xxx.com/4.jpg',
     'http://www.xxx.com/5.jpg'
 ];

 要求使用JavaScript代码按顺序依次请求这5张图片，一次只能请求一张

解决思路

可以结合 闭包+回调+递归 组合来解决

  var imgUrls = [
       'http://www.xxx.com/1.jpg',
       'http://www.xxx.com/2.jpg',
       'http://www.xxx.com/3.jpg',
       'http://www.xxx.com/4.jpg',
       'http://www.xxx.com/5.jpg'
   ];
   // 请求图片
   function getImg(url, cb){
       var img = new Image();
       img.onload = function(){
           if(typeof cb === 'function'){
               cb();
           }
       }
       img.src = url;
   }

   ;(function iterator(index){
       // 当index等于imgUrls数组的长度的时候就不再执行,否则会造成死循环
       if(index === imgUrls.length){
           return;
       }
       getImg(imgUrls[index], function(){
           iterator(index + 1);
       })
   })(0);

链接: https://fly63.com/article/detial/7311