有个循环,循环一个异步回调,为啥回调引用的循环值都是最后一步循环的循环值?然后,又有些时候无论什么循环值都得不到?

 var arr = [1,3,5,7,9];
var arrLength = arr.length; for (var i = 0; i < arrLength; i++) {
setTimeout(function() {
console.log(i);
console.log(arr[i]);
}, 2000);
}

结果是:

5
undefined
5
undefined
5
undefined
5
undefined
5
undefined

解决方法:使用自执行函数传参

 var arr = [1,3,5,7,9];
var arrLength = arr.length; for (var i = 0; i < arrLength; i++) {
(function(i) {
setTimeout(function() {
console.log('i是' + i);
console.log('value是' + arr[i]);
}, 2000);
})(i);
}

结果是:

i是0
value是1
i是1
value是3
i是2
value是5
i是3
value是7
i是4
value是9

参考链接:

https://www.jianshu.com/p/690f58a3ff7b

JS的for循环包裹异步函数的问题的更多相关文章

  1. js for 循环中有异步函数时,回调函数总是最后一步的值。

    原因:for循环执行时不会等待异步函数执行. 解决方法: 1.改为递归函数(暂时不会). 2.构建一个自执行函数传参(匿名函数) 参考::https://www.cnblogs.com/csuwuji ...

  2. JS中的循环嵌套 BOM函数

    [嵌套循环特点]                           外层循环转一次,内层循环转一圈              外层循环控制行数,内层循环控制每行元素个数             [做 ...

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

    这几天跟着视频学习node.js,碰到很多的异步函数的问题,现在将for循环中出现的异步函数回调值的问题总结如下: 具体问题是关于遍历文件夹中的子文件夹的,for循环包裹异步函数的代码: for (v ...

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

    一.问题 今天工作中解决bug发现是由“for循环的异步函数,回调引用的循环值始终是最后的值”的现象导致的,如: for (var i = 0; i < files.length; i++) { ...

  5. 更优雅的方式: JavaScript 中顺序执行异步函数

    火于异步 1995年,当时最流行的浏览器--网景中开始运行 JavaScript (最初称为 LiveScript). 1996年,微软发布了 JScript 兼容 JavaScript.随着网景.微 ...

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

    Promise的概念 Promise 对象用于异步(asynchronous)计算..一个Promise对象代表着一个还未完成,但预期将来会完成的操作. Promise的几种状态: pending:初 ...

  7. JS异步函数 返回值

    1.  js 异步的几种情况 : 1.1 异步操作由浏览器内核的 webcore 来执行: onclick 由浏览器内核的 DOM Binding 模块来处理,当事件触发的时候,回调函数会立即添加到任 ...

  8. js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快、简单 post:安全,量大,不缓存)(服务器同步和异步区别:同步:等待服务器响应当中浏览器不能做别的事情)(ajax和jquery一起用的)

    js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...

  9. 10-Node.js学习笔记-异步函数

    异步函数 异步函数是异步编程语法的终极解决方案,它可以让我们将异步代码写成同步的形式,让代码不再有回调函数嵌套,是代码变得清晰明了 const fn = async()=>{} async fu ...

随机推荐

  1. FastDfs单机版搭建

    详细的最新版fastdfs单机版搭建 前言 目前项目是tomcat单机部署的,图片.视频也是上传到tomcat目录下,关键是此项目的主要内容还就是针对图片.视频的,这让我非常担忧:文件服务器的应用是必 ...

  2. 【Leetcode】二进制求和

    解题思路: 1. 首先在两个字符串前面补‘0’,使它们等长.否则要一直监督操作是否超出两个字符串的索引. 2. 从后向前遍历所有位数,同位相加.字符相加,利用ASCII码,字符在内部都用数字表示,我们 ...

  3. ZooKeeper设置开机启动

    1 在init.d目录下新建脚本文件 进入到/etc/rc.d/init.d目录下,命令是: cd    /etc/rc.d/init.d 新建一个名为zookeeper的文件,命令是: touch ...

  4. [BZOJ4695]最假女选手:segment tree beats!

    分析 segment tree beats!模板题. 看了gxz的博客突然发现自己写的mxbt和mnbt两个标记没用诶. 代码 #include <bits/stdc++.h> #defi ...

  5. 利用 clipboardData 在网页中实现截屏粘贴的功能

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  6. (转)C#进阶之WebAPI

    转:https://www.cnblogs.com/yuchenghao/p/10598825.html 首先第一点:什么是WebAPI? 首先我们了解一下.net framework 的框架构成, ...

  7. 【零售App】—— react/ant design mobile项目爬坑

    一.H5制作 - 图片文本的动画效果 bug:打开一个模板,添加图片,添加动画效果,若先选定动画效果,再调节动画时间和延迟时间,则动画和延迟时间没有改变:若先调节动画时间和延迟时间在选定动画效果,则动 ...

  8. 三、Appium-python-UI自动化之元素定位uiautomatorviewer

    uiautomatorviewer是android-sdk自带的一个元素定位工具,非常简单好用,使用uiautomatorviewer,可以检查一个应用的UI来查看应用的布局和组件以及相关的属性. 一 ...

  9. 使用Callable或DeferredResult实现springmvc的异步请求

    使用Callable实现springmvc的异步请求 如果一个请求中的某些操作耗时很长,会一直占用线程.这样的请求多了,可能造成线程池被占满,新请求无法执行的情况.这时,可以考虑使用异步请求,即主线程 ...

  10. Object.freeze与 Object.seal的区别

    Object.freeze()冻结一个对象.不能添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性.可配置性.可写性,以及不能修改已有属性的值.冻结一个对象后该对象的原型也不能被修改. ...