資訊專欄INFORMATION COLUMN
摘要：循環(huán)執(zhí)行，每一次循環(huán)都是異步且等上一循環(huán)結(jié)束后再執(zhí)行下一次循環(huán)。異步執(zhí)行數(shù)組中的每一項(xiàng)，并在每一項(xiàng)執(zhí)行完后才繼續(xù)執(zhí)行后面的代碼。并不是循環(huán)體內(nèi)的內(nèi)容異步執(zhí)行了，而是用循環(huán)的形式，把多個(gè)用方法連接起來。
網(wǎng)上有很多類似的實(shí)現(xiàn)方式，但我也不太懂js啊，所以我專門用TS寫了一遍。
循環(huán)執(zhí)行Promise，每一次循環(huán)都是異步且等上一循環(huán)結(jié)束后再執(zhí)行下一次循環(huán)。
TypeScript異步執(zhí)行數(shù)組中的每一項(xiàng)，并在每一項(xiàng)執(zhí)行完后才繼續(xù)執(zhí)行后面的代碼。
用的ES2015。
這個(gè)寫法有什么用處呢？如果是加載資源，一般都是同時(shí)加載，最后統(tǒng)計(jì)加載完成的個(gè)數(shù)，都是能并發(fā)就并發(fā)的。
想來想去，不知道這種依次異步的實(shí)現(xiàn)方式，用在哪里。
后來我想，這可以用來實(shí)現(xiàn)類似Rx的流的概念。我一系列操作步驟，無論同步異步，全放在循環(huán)里，可以大大優(yōu)化代碼
/**異步循環(huán) */
function doLoop()
{
try
{
var result:Promise = Promise.resolve();
//forEach寫法
loopArr.forEach(
function (factory)
{
result = result.then(factory);
}
);
// Promise.all寫法
//Promise.all(loopArr.map(
// function(factory)
// {
// result = result.then(factory);
// }
//));
result.then(logLoopResult);
}
catch(err)
{
console.log("loop failed");
}
}
/**循環(huán)結(jié)束后才會執(zhí)行此方法 */
function logLoopResult()
{
console.log("do Loop end");
}
var loopCount:number = 0;
var maxCount:number = 3;
var loopArr = [promiseFactry1, promiseFactry2, promiseFactry3];
function calllLoopPromise(reslove)
{
setTimeout(
function ()
{
//此處loopCount++只是為了看下效果，實(shí)際不需要計(jì)數(shù)
loopCount++;
console.log(loopCount, maxCount);
return reslove("loopCount");
}
, 1000
);
}
function promiseFactry1()
{
return new Promise(calllLoopPromise);
}
function promiseFactry2()
{
return new Promise(calllLoopPromise);
}
function promiseFactry3()
{
return new Promise(calllLoopPromise);
}
歸根結(jié)底，這種寫法，適合需要處理批量promise的情況。
并不是循環(huán)體內(nèi)的內(nèi)容異步執(zhí)行了，而是用循環(huán)的形式，把多個(gè)promise用then方法連接起來。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90057.html
摘要：以下展示它是如何工作的函數(shù)使用構(gòu)造函數(shù)創(chuàng)建一個(gè)新的對象，并立即將其返回給調(diào)用者。在傳遞給構(gòu)造函數(shù)的函數(shù)中，我們確保傳遞給，這是一個(gè)特殊的回調(diào)函數(shù)。 本系列文章為《Node.js Design Patterns Second Edition》的原文翻譯和讀書筆記，在GitHub連載更新，同步翻譯版鏈接。 歡迎關(guān)注我的專欄，之后的博文將在專欄同步： Encounter的掘金專欄 知乎專欄...
摘要：如果列表是空的，則存入組件后將異步刷新任務(wù)加入到事件循環(huán)當(dāng)中。四總結(jié)本文基于上一個(gè)版本的代碼，加入了事件處理功能，同時(shí)通過異步刷新的方法提高了渲染效率。 歡迎關(guān)注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言 目前最流行的兩大前端框架，React和Vue，都不約而同的借助Virtual DO...
摘要：接下來我們看下三類異步編程的實(shí)現(xiàn)。事件監(jiān)聽事件發(fā)布訂閱事件監(jiān)聽是一種非常常見的異步編程模式，它是一種典型的邏輯分離方式，對代碼解耦很有用處。 一、 一道面試題 前段時(shí)間面試，考察比較多的是js異步編程方面的相關(guān)知識點(diǎn)，如今，正好輪到自己分享技術(shù)，所以想把js異步編程學(xué)習(xí)下，做個(gè)總結(jié)。下面這個(gè)demo 概括了大多數(shù)面試過程中遇到的問題： for(var i = 0; i < 3; i++...
摘要：譯數(shù)組循環(huán)的幾個(gè)坑原文地址原文作者在循環(huán)中使用循環(huán)遍歷數(shù)組似乎很簡單，但是在將兩者結(jié)合使用時(shí)需要注意一些非直觀的行為。循環(huán)的情況問題如上述代碼能夠正常執(zhí)行。但我還是喜歡循環(huán)帶來的簡潔和高可讀性。 [譯]async-await 數(shù)組循環(huán)的幾個(gè)坑 原文地址：https://medium.com/dailyjs/th... 原文作者：Tory Walker 在 Javascript 循...
摘要：也就是說，你調(diào)用生成器函數(shù)，它會返回給你一個(gè)迭代器。迭代器會遍歷每個(gè)中斷點(diǎn)。等同于總結(jié)異步解決方案還有其他的一些方法不過都不重要我們只要掌握了用寫異步代碼更方便維護(hù)第一次寫文章寫的不好多多包涵畢竟很多東西都是站在前任人的肩膀上直接拿過來的 由于JavaScript是單線程的一門腳本語言（主線程是單線程） 所以異步問題是個(gè)讓人常頭疼的問題 我們來看一下常見的傳統(tǒng)解決方案 1.回調(diào)函數(shù) 回...
閱讀 1955·2021-10-12 10:12
閱讀 3083·2019-08-30 15:44
閱讀 853·2019-08-30 15:43
閱讀 3002·2019-08-30 14:02
閱讀 2087·2019-08-30 12:54
閱讀 3508·2019-08-26 17:05
閱讀 1995·2019-08-26 13:34
閱讀 1062·2019-08-26 11:54
