当前位置: 首页 > 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 教程目录
  • bootstrap创建登录注册页面
  • CSS 专业技巧
  • mongodb--安装和初步使用教程
  • mysql外键的使用
  • RedisSerializer之JdkSerializationRedisSerializer分析
  • redis学习笔记(三):列表、集合、有序集合
  • seaborn 安装成功 + ImportError: DLL load failed: 找不到指定的模块 问题解决
  • vue数据传递--我有特殊的实现技巧
  • 阿里云Kubernetes容器服务上体验Knative
  • 程序员最讨厌的9句话,你可有补充?
  • 浮动相关
  • 基于Vue2全家桶的移动端AppDEMO实现
  • 罗辑思维在全链路压测方面的实践和工作笔记
  • 通过git安装npm私有模块
  •  一套莫尔斯电报听写、翻译系统
  • 再次简单明了总结flex布局,一看就懂...
  • 再谈express与koa的对比
  • # Java NIO(一)FileChannel
  • $.each()与$(selector).each()
  • (02)Unity使用在线AI大模型(调用Python)
  • (4)事件处理——(2)在页面加载的时候执行任务(Performing tasks on page load)...
  • (DenseNet)Densely Connected Convolutional Networks--Gao Huang
  • (Note)C++中的继承方式
  • (pytorch进阶之路)CLIP模型 实现图像多模态检索任务
  • (二)正点原子I.MX6ULL u-boot移植
  • (分类)KNN算法- 参数调优
  • (附源码)ssm学生管理系统 毕业设计 141543
  • (机器学习-深度学习快速入门)第三章机器学习-第二节:机器学习模型之线性回归
  • (每日持续更新)jdk api之FileReader基础、应用、实战
  • (十二)devops持续集成开发——jenkins的全局工具配置之sonar qube环境安装及配置
  • (图文详解)小程序AppID申请以及在Hbuilderx中运行
  • (一)项目实践-利用Appdesigner制作目标跟踪仿真软件
  • (转)如何上传第三方jar包至Maven私服让maven项目可以使用第三方jar包
  • ./include/caffe/util/cudnn.hpp: In function ‘const char* cudnnGetErrorString(cudnnStatus_t)’: ./incl
  • .FileZilla的使用和主动模式被动模式介绍
  • .java 指数平滑_转载:二次指数平滑法求预测值的Java代码
  • .NET Core、DNX、DNU、DNVM、MVC6学习资料
  • .NET Core工程编译事件$(TargetDir)变量为空引发的思考
  • .NET delegate 委托 、 Event 事件,接口回调
  • .net framework profiles /.net framework 配置