问题思考

在不使用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