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 ...
随机推荐
- composer Changed current directory to没反应
根据官方手册执行composer global require "laravel/installer" 显示Changed current directory to C:/User ...
- flutter DateTime日期&时间选择器
import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import 'dart:async'; class ...
- netty5心跳与阻塞性业务消息分发实例
继续之前的例子(netty5心跳与业务消息分发实例),我们在NettyClientHandler把业务消息改为阻塞性的: package com.wlf.netty.nettyclient.handl ...
- 【Redis】CacheCloud介绍及快速开始
CacheCloud是做什么的 CacheCloud提供一个Redis云管理平台:实现多种类型(Redis Standalone.Redis Sentinel.Redis Cluster)自动部署.解 ...
- 谷歌Chrome浏览器 截取网页长图方法
Chrome浏览器: 1.按F12打开调试页面 2.按下ctrl + shift + p 3.输入命令 Capture full size screenshot 并回车 4.浏览器会自动截取整个网页内 ...
- Spring Boot与MyBatis的集成
SSM(Spring+Spring MVC+MyBatis)是当前主流的框架组合开发方式之一,普遍被应用于互联网项目中.如果要使用Spring Boot开发一个基于SSM框架的应用,那么我们要怎么做呢 ...
- Bmp格式图片与16进制的互相转换简解 Python
BMP TO HEX 首先介绍Github上一个简单的Bmp转成16进制的py: https://github.com/robertgallup/bmp2hex 网上这种例子很多.思路也简单:将bmp ...
- Vue个人笔记
目录 前言 Vue的插值表达式怎么保留小数位 表格列被挤,位置很小 v-if多个条件 前言 此笔记仅仅记录我在使用过程中遇到的一些问题,不定期更新 Vue的插值表达式怎么保留小数位 插值表达式其实都是 ...
- keepalived通过飘移ip实现高可用配置步骤
环境:两台虚拟机即可 centos7.3虚拟机A 10.0.3.46 centos7.3虚拟机B 10.0.3.110 对外开放的虚拟ip 10.0.3.96(这个ip只需要在keepalived里面 ...
- 常见问题:Web/Servlet生命周期与Spring Bean生命周期
Servlet生命周期 init()初始化阶段 Servlet容器加载Servlet(web.xml中有load-on-startup=1;Servlet容器启动后用户首次向Servlet发请求;Se ...