HTML5教程

闭包应用之:异步变同步

本文主要是介绍闭包应用之:异步变同步,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

问题思考

在不使用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);
这篇关于闭包应用之:异步变同步的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!