闭包应用之:异步变同步
2020/1/15 5:23:15
本文主要是介绍闭包应用之:异步变同步,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
问题思考
在不使用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);
这篇关于闭包应用之:异步变同步的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-24Vite多环境配置学习:新手入门教程
- 2024-11-23实现OSS直传,前端怎么实现?-icode9专业技术文章分享
- 2024-11-22在 HTML 中怎么实现当鼠标光标悬停在按钮上时显示提示文案?-icode9专业技术文章分享
- 2024-11-22html 自带属性有哪些?-icode9专业技术文章分享
- 2024-11-21Sass教程:新手入门及初级技巧
- 2024-11-21Sass学习:初学者必备的简单教程
- 2024-11-21Elmentplus入门:新手必看指南
- 2024-11-21Sass入门:初学者的简单教程
- 2024-11-21前端页面设计教程:新手入门指南
- 2024-11-21Elmentplus教程:初学者必备指南