码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-12-11 19:40:48      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:jquer   www   query   key   输出   方案   javascrip   UNC   direct   

一、问题

今天工作中解决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 {
            console.log(2);
        }
    });
}

输出结果是:

wedding3
wedding3
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>

参照:https://www.cnblogs.com/csuwujing/p/8021913.html

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

标签:jquer   www   query   key   输出   方案   javascrip   UNC   direct   

原文地址:https://www.cnblogs.com/vickylinj/p/12024289.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!