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>
时间: 2024-10-12 11:42:17

js的for循环中出现异步函数,回调引用的循环值总是最后一步的值?的相关文章

js的for循环中出现异步函数,回调引用的循环值始终是最后的值

一.问题 今天工作中解决bug发现是由“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 { c

Array中使用异步函数遍历元素

为确保Array每次循环等待上次操作完成,必须在每次循环中使用异步函数 const arr = [1, 2, 3]; async function fn() { await arr.reduce(async (accumulator, currentValue) => { await accumulator; await sleep(2000); console.log(currentValue); }, undefined); }; fn(); async function sleep(arg

Node.js用ES6原生Promise对异步函数进行封装

版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.转载请注明来源http://blog.csdn.net/azureternite 目录(?)[+] Promise的概念 Promise 对象用于异步(asynchronous)计算..一个Promise对象代表着一个还未完成,但预期将来会完成的操作. Promise的几种状态: pending:初始状态,即等待操作的执行 fulfilled:成功的操作 rejected:失败的操作 pending的状态

python易错题之lambda 以及 for循环中内嵌函数

li = [] for x in range(10): print(x) //在函数没有执行前(li[0]()),for 循环中x已经执行完,x会一直为 9 def fun(): print(x) //一直为 9 ,fun函数在for循环中是没有被调用的 return x li.append(fun) print(li[0]()) //9 li = [lambda :x for x in range(10)] print(type(li)) #<class 'list'> print(type

管道下while循环中定义的变量在退出while循环时引用为空的问题

最近在编写一个shell脚本的时候,在while循环中定义了一些变量,但是当while退出之后调用这些变量的时候发现,变量值都为空了,折腾了一整天,才找到其原因之所在: 我在这里只是大致做一个实验,说明下这里问题出在说明地方,开始的时候代码大意就是: #!/bin/sh cat config.ini | while read var do a=$var echo $a done echo "$a mark" [[email protected]_102 ~]# cat config.i

while循环中使用scanf函数

妈的,这scanf函数学了快10年了,怎么还会出现莫名其妙的问题?看下面的代码(VS2012环境下运行): #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> int main() { char root_value = '\0'; int i =1; while (i!=5) { printf("输入:"); scanf("%c",&root_value);//用户输入节点 i++; } prin

在Angular外部使用js调用Angular控制器中提供的函数方法或变量

Html代码如下所示: 1 <!DOCTYPE html> 2 <html ng-app="myApp" id="myApp"> 3 <head> 4 <meta name="viewport" content="width=device-width" /> 5 <title>Test</title> 6 <script src="~/Co

node.js中的匿名函数, 回调函数和嵌套函数

定义一个函数相信大家已经很熟悉了, 在javascript里的函数也是非常重要的, 使用率非常高, 有几种函数不是很好理解 一, 匿名函数 var remove = function(num1) { return num1; } var fun = remove(5); console.log(fun); 这里定义的这个函数没有设置函数名, 在使用的时候要使用变量调用这个函数. 最后的输出结果: 5 二, 回调函数, 传递的参数可以定义成任意的对象, 而在这里, 其中的一个参数就是一个函数 fu

《JS权威指南学习总结--8.7 函数属性、方法和构造函数》

内容要点:   在JS程序中,函数是值.对函数执行typeof运算会返回字符串 "function",但是函数是JS中特殊的对象.因为函数也是对象,它们也可以拥有属性和方法,就像普通的对象可以拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象. 一.length属性     在函数体内,arguments.length表示传入函数的实参的个数.    而函数本身的length属性则有着不同含义.函数length属性是只读属性,它代表函数实参的数量,这里的参数指