js的for循环中出现异步函数,回调引用的循环值总是最后一步的值?
这几天跟着视频学习node.js,碰到很多的异步函数的问题,现在将for循环中出现的异步函数回调值的问题总结如下:
具体问题是关于遍历文件夹中的子文件夹的,for循环包裹异步函数的代码:
for (var i = 0; i < files.length; i++) {
var itemFile = files[i];
fs.stat("./uploads/" + itemFile, function (err, stats) {
if (stats.isDirectory()) {
console.log(itemFile+i);
} else {
console.log(2);
}
});
}
输出结果是:
wedding3
wedding3
wedding3
for循环是同步任务,i在不断滴增加直到等于file.length时候,循环不再执行,即等于3(自己实验代码)。而循环内部的判断是否是文件夹的isDirectory函数是异步函数,也就是说内部的console.log(itemFile+i); 的执行任务被排在了任务队列的最后,所以for循环本身会先执行3次,但是不执行回调里面的任务,for循环都结束时,回调函数里面的console.log才开始执行第一次,所以每次输出都是wedding3.
当然这并不是我们想要的结果,解决方法可以通过自执行函数传参(匿名函数),这样就形成了不受外界变量影响的局部作用域。如:
for (var i = 0; i < files.length; i++) {
(function(i){
var itemFile = files[i];
fs.stat("./uploads/" + itemFile, function (err, stats) {
if (stats.isDirectory()) {
console.log(itemFile+i);
} else {
console.log(2);
}
});
})(i);
}
输出得到:
cat0
dog1
wedding2
这样就可以解决之前只输出最后循环的值的问题。
前端页面开发也会碰到类似的问题,比如setTimeout异步执行的问题,在前端可以通过jquery的each方案解决。用jQuery的 $.each(),自带回调函数,形成了函数作用域.
<script type="text/javascript">
var arr = ["dog",cat","wedding"];
$.each(arr, function(key, value) {
setTimeout(function() {
console.log(key);
console.log(value);
}, 2000);
});
</script>
js的for循环中出现异步函数,回调引用的循环值总是最后一步的值?的更多相关文章
- js的for循环中出现异步函数,回调引用的循环值始终是最后的值
一.问题 今天工作中解决bug发现是由“for循环的异步函数,回调引用的循环值始终是最后的值”的现象导致的,如: for (var i = 0; i < files.length; i++) { ...
- 简单的node爬虫练手,循环中的异步转同步
简单的node爬虫练手,循环中的异步转同步 转载:https://blog.csdn.net/qq_24504525/article/details/77856989 看到网上一些基于node做的爬虫 ...
- JS循环中使用bind函数的参数传递问题
JS循环中使用bind函数的参数传递问题,问题代码如下: for (var sc in result) { var tempp = '<div class="sidebar_todo_ ...
- 如何在单元测试中测试异步函数,block回调这种
大概有四种方法: runloop 阻塞主进程等待结果 semphaore 阻塞主进程等待结果 使用XCTestExpectation 阻塞主线程等待(我用这个,xcode自带的,为啥不用) 使用第三方 ...
- JavaScript中的异步函数
JavaScript中的异步函数 ES8 的 async/await 旨在解决利用异步结构组织代码的问题.为此, ECMAScript 对函数进行了扩展,为其增加了两个新关键字: async 和 aw ...
- Node.js用ES6原生Promise对异步函数进行封装
Promise的概念 Promise 对象用于异步(asynchronous)计算..一个Promise对象代表着一个还未完成,但预期将来会完成的操作. Promise的几种状态: pending:初 ...
- JS中的异步与回调
问题的引出:在js中使用异步调用时,有可能会出现在异步的回调函数中设置调用之外的变量值,但在异步调用完成后去使用变量,却发现这些变量值并没有被成功设置的情况.如: google map中的地理编码,地 ...
- python:Asyncio模块处理“事件循环”中的异步进程和并发执行任务
python模块Asynico提供了管理事件.携程.任务和线程的功能已经编写并发代码的同步原语. 组成模块: 事件循,Asyncio 每个进程都有一个事件循环. 协程,子例程概念的泛化,可以暂停任务, ...
- 【JS】336- 拆解 JavaScript 中的异步模式
点击上方"前端自习课"关注,学习起来~ JavaScript 中有很多种异步编程的方式.callback.promise.generator.async await 甚至 RxJS ...
随机推荐
- 006 DOM节点操作与元素的创建
一:节点 1.节本基本概念 节点主要有标签,属性,文本[包括文字,空格,换行,回车]. 2.节点的属性 可以使用标签,元素点出来 可以使用标签,点出来 可以使用文本,点出来 nodeType:1--标 ...
- Elasticsearch和Head插件安装(转)
环境: CentOS7 Elasticsearch-6.3.2 JDK8 准备: JDK8 下载地址:http://www.oracle.com/technetwork/java/javase/do ...
- [原][osg][OSGEARTH]OE的关闭打开自动计算裁剪面被OE的海洋ocean影响
在osgEarthUtil 下 Ocean.cpp 的 traverse函数中: // we don't want the ocean participating in the N/F calcul ...
- ISO/IEC 9899:2011 条款6.5.7——按位移位操作符
6.5.7 按位移位操作符 语法 1.shift-expression: additive-expression shift-expression << additive-ex ...
- bladex之nacos配置
blade.yaml #服务器配置server: undertow: # 设置IO线程数, 它主要执行非阻塞的任务,它们会负责多个连接, 默认设置每个CPU核心一个线程 io-threa ...
- 【计算机视觉】基于局部二值相似性模式(LBSP)的运动目标检测算法
基于局部二值相似性模式(LBSP)的运动目标检测算法 kezunhai@gmail.com http://blog.csdn.net/kezunhai 本文根据论文:Improving backgro ...
- 大师Geoff Hinton关于Deep Neural Networks的建议
大师Geoff Hinton关于Deep Neural Networks的建议 Note: This covers suggestions from Geoff Hinton's talk given ...
- java设计模式(一)——单例模式
1.基本介绍 单例设计模式,就是采取一定的方法保证在整个的软件系统中,对某个类只能存在一个对象实例,并且该类只提供-一个取得其对象实例的方法(静态方法).如:一般情况下,数据库的连接 2.创建方式: ...
- Appium移动自动化测试-----(四)安装 appium Server
我们可以在Appium官方网站上下载操作系统相应的Appium版本. https://bitbucket.org/appium/appium.app/downloads/ 当前最新版本为 Appium ...
- Linux下的Curses库的源码下载与安装
curses库是可以在linux终端中写出字符用户界面的一个库,现在较新的版本应该是ncurses库,现在已经很少有人再去使用他了,所以想拥有这个库并且在linux下写出自己用户界面的可以参考一下本博 ...