js中forEach回調(diào)同異步問題

chenjiang3 發(fā)布于2019-08-23 15:19 / 1691人閱讀

摘要：我理解的是的回調(diào)函數(shù)會(huì)被立即執(zhí)行，回調(diào)里有異步代碼，根據(jù)機(jī)制放入調(diào)用棧，繼續(xù)執(zhí)行同步代碼以結(jié)束回調(diào)本身就是異步函數(shù)，放入調(diào)用棧，結(jié)束本次遍歷。

js中forEach本身是同步的
舉個(gè)栗子：

[many, too many, so many].forEach((value) => {
    some code;  //  這是一個(gè)大數(shù)值運(yùn)算（非異步代碼），需要幾毫秒的時(shí)間
});
other code;  // 這些代碼將會(huì)阻塞，等到forEach循環(huán)完之后執(zhí)行

這是回調(diào)中沒有異步代碼的情況。

再舉一個(gè)有異步的

[1, 2, 3].forEach((value) => {
    setTimeout(function() {
        some code;
    }, 1000);
});
other code; // 這部分代碼不會(huì)被setTimeout阻塞，forEach遍歷完1,2,3之后就執(zhí)行

[1, 2, 3].forEach( async (value) => {
    let foo = await promiseFn();
});
other code; // 同樣不會(huì)受到異步阻塞

上面是2種異步代碼形式，但是都不會(huì)阻塞后面的代碼。我理解的是：forEach的回調(diào)函數(shù)會(huì)被立即執(zhí)行，回調(diào)里有異步代碼，根據(jù)EventLoop機(jī)制放入調(diào)用棧，繼續(xù)執(zhí)行同步代碼以結(jié)束; 回調(diào)本身就是異步函數(shù)，放入調(diào)用棧，結(jié)束本次遍歷。

結(jié)合代碼理解：

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

對(duì)于常規(guī)for循環(huán)

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，每隔一秒輸出一個(gè)數(shù)字

GPU云服務(wù)器云服務(wù)器 js中回調(diào)函數(shù)問題 js 異步回調(diào) 返回?cái)?shù)據(jù) 同步回調(diào)和異步回調(diào) 異步回調(diào)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/101858.html

相關(guān)文章

異步的JavaScript

摘要：如果在瀏覽器中線程阻塞了，瀏覽器可能會(huì)失去響應(yīng)，從而造成不好的用戶體驗(yàn)。中也有可能會(huì)產(chǎn)生新的，會(huì)進(jìn)入尾部，并在本次前執(zhí)行。這就是所謂的，而把回調(diào)函數(shù)的嵌套邏輯替換成了符合正常人思維習(xí)慣的線性邏輯。 JS本身是一門單線程的語言，所以在執(zhí)行一些需要等待的任務(wù)(eg.等待服務(wù)器響應(yīng)，等待用戶輸入等)時(shí)就會(huì)阻塞其他代碼。如果在瀏覽器中JS線程阻塞了，瀏覽器可能會(huì)失去響應(yīng)，從而造成不好的用戶體驗(yàn)...

tangr206 2019-08-26 13:36 評(píng)論0 收藏0
js文件加載優(yōu)化

摘要：所以這里需要另外的操作來對(duì)文件加載進(jìn)行優(yōu)化加載這是中定義的一個(gè)屬性，它用來表示的是，當(dāng)渲染引擎遇到的時(shí)候，如果引用的是外部資源，則會(huì)暫時(shí)掛起，并進(jìn)行加載。在js引擎部分，我們可以了解到，當(dāng)渲染引擎解析到script標(biāo)簽時(shí)，會(huì)將控制權(quán)給JS引擎，如果script加載的是外部資源，則需要等待下載完后才能執(zhí)行。所以，在這里，我們可以對(duì)其進(jìn)行很多優(yōu)化工作。放置在body底部為了讓渲染引...

zhaochunqi 2019-08-19 17:36 評(píng)論0 收藏0
資源依賴問題在 bowl 中的一種解決方式

摘要：多個(gè)異步任務(wù)的順序執(zhí)行通過方法，取得了一個(gè)描述加載順序的二維數(shù)組。同時(shí)，二維數(shù)組的長度也是不定的，更不能窮舉。利用這個(gè)特性，只需要遍歷原二維數(shù)組，將每個(gè)放在一個(gè)中的函數(shù)中執(zhí)行并返回即可因?yàn)榈姆祷刂稻褪且粋€(gè)，有一種惰性執(zhí)行的感覺。問題 bowl 是一個(gè)利用 local storage 進(jìn)行靜態(tài)資源緩存和加載的工具庫，在開發(fā)過程中遇到過一些問題，其中比較典型的是加載多個(gè)資源的時(shí)候資源之間...

Ilikewhite 2019-08-22 10:48 評(píng)論0 收藏0
JavaScript深入淺出異步編程-promise原理

摘要：這樣得到權(quán)力回調(diào)函數(shù)，當(dāng)?shù)漠惒酱a執(zhí)行完畢后，由來執(zhí)行回調(diào)函數(shù)。而在平時(shí)的開發(fā)過程中，在異步編程中起到了幾乎不可替代的作用。其實(shí)Promise本身并不具備異步的能力，而之所以這里需要單獨(dú)開一篇說明其原理，是因?yàn)镻romise在異步編程的過程中是一個(gè)不可或缺的一環(huán)。原因下面細(xì)說。在說promise之前，有必要先說下JS中的回調(diào)方式。比如下面： function doSomething...

morgan 2019-08-26 10:45 評(píng)論0 收藏0
數(shù)組的遍歷你都會(huì)用了，那Promise版本的呢

摘要：我們要進(jìn)行一個(gè)奇數(shù)的篩選，所以我們這么寫然后我們改為版本這會(huì)導(dǎo)致我們的篩選功能失效，因?yàn)榈姆祷刂灯ヅ洳皇峭耆嗟鹊钠ヅ洌灰欠祷刂的苻D(zhuǎn)換為，就會(huì)被認(rèn)定為通過篩選。這里指的遍歷方法包括：map、reduce、reduceRight、forEach、filter、some、every因?yàn)樽罱M(jìn)行了一些數(shù)據(jù)匯總，node版本已經(jīng)是8.11.1了，所以直接寫了個(gè)async/await的腳...

zhangqh 2019-08-22 16:44 評(píng)論0 收藏0