js中forEach回调同异步问题

chenjiang3 发布于2019-08-23 15:19 / 1690人阅读

摘要：我理解的是的回调函数会被立即执行，回调里有异步代码，根据机制放入调用栈，继续执行同步代码以结束回调本身就是异步函数，放入调用栈，结束本次遍历。

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，每隔一秒输出一个数字

GPU云服务器云服务器 js中回调函数问题 js 异步回调返回数据同步回调和异步回调异步回调

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101858.html

异步的JavaScript

摘要：如果在浏览器中线程阻塞了，浏览器可能会失去响应，从而造成不好的用户体验。中也有可能会产生新的，会进入尾部，并在本次前执行。这就是所谓的，而把回调函数的嵌套逻辑替换成了符合正常人思维习惯的线性逻辑。 JS本身是一门单线程的语言，所以在执行一些需要等待的任务(eg.等待服务器响应，等待用户输入等)时就会阻塞其他代码。如果在浏览器中JS线程阻塞了，浏览器可能会失去响应，从而造成不好的用户体验...

tangr206 2019-08-26 13:36 评论0 收藏0
js文件加载优化

摘要：所以这里需要另外的操作来对文件加载进行优化加载这是中定义的一个属性，它用来表示的是，当渲染引擎遇到的时候，如果引用的是外部资源，则会暂时挂起，并进行加载。在js引擎部分，我们可以了解到，当渲染引擎解析到script标签时，会将控制权给JS引擎，如果script加载的是外部资源，则需要等待下载完后才能执行。所以，在这里，我们可以对其进行很多优化工作。放置在body底部为了让渲染引...

zhaochunqi 2019-08-19 17:36 评论0 收藏0
资源依赖问题在 bowl 中的一种解决方式

摘要：多个异步任务的顺序执行通过方法，取得了一个描述加载顺序的二维数组。同时，二维数组的长度也是不定的，更不能穷举。利用这个特性，只需要遍历原二维数组，将每个放在一个中的函数中执行并返回即可因为的返回值就是一个，有一种惰性执行的感觉。问题 bowl 是一个利用 local storage 进行静态资源缓存和加载的工具库，在开发过程中遇到过一些问题，其中比较典型的是加载多个资源的时候资源之间...

Ilikewhite 2019-08-22 10:48 评论0 收藏0
JavaScript深入浅出异步编程-promise原理

摘要：这样得到权力回调函数，当的异步代码执行完毕后，由来执行回调函数。而在平时的开发过程中，在异步编程中起到了几乎不可替代的作用。其实Promise本身并不具备异步的能力，而之所以这里需要单独开一篇说明其原理，是因为Promise在异步编程的过程中是一个不可或缺的一环。原因下面细说。在说promise之前，有必要先说下JS中的回调方式。比如下面： function doSomething...

morgan 2019-08-26 10:45 评论0 收藏0
数组的遍历你都会用了，那Promise版本的呢

摘要：我们要进行一个奇数的筛选，所以我们这么写然后我们改为版本这会导致我们的筛选功能失效，因为的返回值匹配不是完全相等的匹配，只要是返回值能转换为，就会被认定为通过筛选。这里指的遍历方法包括：map、reduce、reduceRight、forEach、filter、some、every因为最近要进行了一些数据汇总，node版本已经是8.11.1了，所以直接写了个async/await的脚...

zhangqh 2019-08-22 16:44 评论0 收藏0