for循环中有异步操作导致数据顺序错乱的问题
时间:2021-09-22
本文章向大家介绍for循环中有异步操作导致数据顺序错乱的问题,主要包括for循环中有异步操作导致数据顺序错乱的问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
经常会遇到for循环里有异步操作,比如某些条件下要去请求数据,某些条件下只是静态数据。最终得到的结果和预期的不一致。
function Func () { let tempArr = [] for (let i = 0; i < 10; i++) { if (i % 2 == 0) { tempArr.push(i + 10) } else { // setTimeout 模拟遇到的异步操作 setTimeout(() => { tempArr.push(i) }, 1) } } console.log(56, tempArr) }
Func()
我们期望的结果是按照循环顺序的数据结果:[10, 1, 12, 3, 14, 5, 16, 7, 18, 9]
但实际输出:异步的结果被追加在了静态数据之后
那么应该如何获取想要的顺序呢?其实很简单,promise 搞定
async function Func () { let tempArr = [] for (let i = 0; i < 10; i++) { if (i % 2 == 0) { tempArr.push(i + 10) } else { await this.asyncFunc(tempArr, i) } } console.log(56, tempArr) } function asyncFunc (tempArr, i) { return new Promise((resolve, reject) => { setTimeout(() => { tempArr.push(i) // 在异步中将结果返回 resolve() }, 1) }) }
最终结果:[10, 1, 12, 3, 14, 5, 16, 7, 18, 9] 赞~
我是一只酸菜鱼,又酸又菜又多余~~~
原文地址:https://www.cnblogs.com/liandudu/p/15318993.html
- MySQL数据库(一):安装MySQL数据库
- Spring Security入门(二):基于数据库验证
- flume搜集日志:如何解决实时不断追加的日志文件及不断增加的文件个数问题
- hduoj-----(2896)病毒侵袭(ac自动机)
- MySQL数据库(二):基本管理
- Golang编程实现生成n个从a到b不重复随机数的方法
- TiDB 在株式会社 FUNYOURS JAPAN 的应用
- MySQL数据库(三):数据类型
- spark开发环境详细教程2:window下sbt库的设置
- hdu----(2222)Keywords Search(ac自动机)
- MySQL数据库(四):约束条件
- hdu----(2084)数塔(dp)
- golang简单tls协议用法完整示例
- spark开发环境详细教程1:IntelliJ IDEA使用详细说明
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- js .map方法
- 【一起学系列】之模板方法:写SSO我只要5分钟
- ConcurrentDictionary线程不安全么,你难道没疑惑,你难道弄懂了么?
- 【一起学系列】之迭代器&组合:虽然有点用不上啦
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
- 使用ActionFilterAttribute 记录 WebApi Action 请求和返回结果记录
- scipy.stats连续分布的基本操作
- InvocationHandler中invoke方法中的第一个参数proxy的用途
- height、offsetheight、clientheight、scrollheight、innerheight、outerheight
- mysql sql-mode 解析和设置
- JAVABEAN EJB POJO区别
- @Component和@Bean以及@Autowired、@Resource
- mybatis generator and 和or条件
- 『.Net反射』ILGenerator.Emit 动态MSIL 编程
- Spring通过XML配置文件以及通过注解形式来AOP 来实现前置,后置,环绕,异常通知