当前位置: 首页 > news >正文

js中forEach回调同异步问题

js中forEach本身是同步的
举个栗子:

[many, too many, so many].forEach((value) => {
    some code;  //  这是一个大数值运算(非异步代码),需要几毫秒的时间
});
other code;  // 这些代码将会阻塞,等到forEach循环完之后执行

这是回调中没有异步代码的情况。

再举一个有异步的

[1, 2, 3].forEach((value) => {
    setTimeout(function() {
        some code;
    }, 1000);
});
other code; // 这部分代码不会被setTimeout阻塞,forEach遍历完1,2,3之后就执行

[1, 2, 3].forEach( async (value) => {
    let foo = await promiseFn();
});
other code; // 同样不会受到异步阻塞

上面是2种异步代码形式, 但是都不会阻塞后面的代码。我理解的是:forEach的回调函数会被立即执行,回调里有异步代码,根据EventLoop机制放入调用栈,继续执行同步代码以结束; 回调本身就是异步函数,放入调用栈,结束本次遍历。

结合代码理解:

Array.prototype.forEach = function (callback) {
    for(let index = 0; index < this.length; index++) {
        callback(this[index], index, this);
    }
}

对于常规for循环

const sleep = (timer) => {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, timer);
    });
}

const foo = async () => {
    for (let i = 0; i < 5; i++) {
        await sleep(1000);
        console.log(i);
    }
}

foo(); // 从1到5,每隔一秒输出一个数字

相关文章:

  • 整行读字符串且需分割计算字符串个数
  • 比特大陆新一轮裁员50%,回应称系人员调整
  • zabbix linux系统模板更新
  • 2019.2.20 c++ 知识梳理
  • 微信全局登录设计与实现
  • 朝鲜APT集团Lazarus通过KEYMARBLE Backdoor瞄准俄罗斯组织
  • Less 日常用法
  • 手机端车牌号码键盘的vue组件
  • 回归生活:清理微信公众号
  • Cisco Nexus 系列交换机NX-OS升级
  • React开发实战
  • 工作中总结前端开发流程--vue项目
  • Java各种IO流的总结
  • MySQL-事务管理(基础)
  • Vultr 教程目录
  • 【Redis学习笔记】2018-06-28 redis命令源码学习1
  • 4月23日世界读书日 网络营销论坛推荐《正在爆发的营销革命》
  • js中forEach回调同异步问题
  • Median of Two Sorted Arrays
  • mysql中InnoDB引擎中页的概念
  • nginx 负载服务器优化
  • 创建一个Struts2项目maven 方式
  • 从0实现一个tiny react(三)生命周期
  • 读懂package.json -- 依赖管理
  • 关于Flux,Vuex,Redux的思考
  • 紧急通知:《观止-微软》请在经管柜购买!
  • 力扣(LeetCode)21
  • 力扣(LeetCode)965
  • 怎么将电脑中的声音录制成WAV格式
  • ​Java并发新构件之Exchanger
  • ​VRRP 虚拟路由冗余协议(华为)
  • #mysql 8.0 踩坑日记
  • #我与Java虚拟机的故事#连载19:等我技术变强了,我会去看你的 ​
  • $refs 、$nextTic、动态组件、name的使用
  • (1)(1.19) TeraRanger One/EVO测距仪
  • (AtCoder Beginner Contest 340) -- F - S = 1 -- 题解
  • (Matlab)使用竞争神经网络实现数据聚类
  • (MonoGame从入门到放弃-1) MonoGame环境搭建
  • (三十五)大数据实战——Superset可视化平台搭建
  • (四)Android布局类型(线性布局LinearLayout)
  • (一)SpringBoot3---尚硅谷总结
  • .Net 代码性能 - (1)
  • .Net多线程总结
  • .net实现头像缩放截取功能 -----转载自accp教程网
  • .NET应用架构设计:原则、模式与实践 目录预览
  • /deep/和 >>>以及 ::v-deep 三者的区别
  • @RestController注解的使用
  • [ vulhub漏洞复现篇 ] Apache APISIX 默认密钥漏洞 CVE-2020-13945
  • [20171101]rman to destination.txt
  • [Bada开发]初步入口函数介绍
  • [BT]BUUCTF刷题第8天(3.26)
  • [bzoj2957]楼房重建
  • [C#]科学计数法(scientific notation)显示为正常数字
  • [fsevents@^2.1.2] optional install error: Package require os(darwin) not compatible with your platfo
  • [HTML]Web前端开发技术12(HTML5、CSS3、JavaScript )——喵喵画网页