Javascript處理循環(huán)的異步操作指南
更新時間：2022年03月16日 09:14:40 作者：曼聯(lián)的小黑熊
這篇文章主要給大家介紹了關(guān)于Javascript處理循環(huán)的異步操作的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
案例：
compute.exec()這是個異步方法,在里面處理一些實際業(yè)務(wù)，這時候打印出來的很可能就是300,300,300（因為異步for循環(huán)還沒有等異步操作返回Promise對象過來i值已經(jīng)改變成300了）
function getMoney(){
var money=[100,200,300]
for(let i=0; i<money.length; i++){
compute.exec().then(()=>{
console.log(money[i])
})
}
}一、async/await 處理思路
async function getMoney(){
var money=[100,200,300]
for( let i=0; i<money.length; i++){
await compute.exec().then(()=>{
console.log(money[i])
})
}
}
// async告訴getMoney方法里面存在異步的操作
// await放在具體異步操作（方法）前面，意思是等待該異步返回Promise才會繼續(xù)后面的操作二、遞歸處理思路
function getMoney(i) {
var money=[100,200,300]
compute.exec().then(() => {
if ( i < money.length ) {
console.log(money[i]);
i++;
getMoney(i);
}
});
}
getMoney(0);//開始調(diào)用
//用遞歸來實現(xiàn)自我循環(huán)（具體循環(huán)在then里面，可以確保前面的compute.exec()的異步操作完成）.then()是返回了Promise對象為resolve后才進(jìn)行的（可以了解一下Promise對象）總結(jié)
到此這篇關(guān)于Javascript處理循環(huán)的異步操作的文章就介紹到這了,更多相關(guān)Javascript循環(huán)異步操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript 2048 游戲?qū)嵗a(簡單易懂)
使用javascript制作的2048小游戲非常好玩，有意思，下面給大家分享使用javascript代碼制作的2048游戲，需要的朋友參考下吧2016-03-03
利用google提供的API(JavaScript接口)獲取網(wǎng)站訪問者IP地理位置的代碼詳解
利用google提供的API(JavaScript接口)獲取網(wǎng)站訪問者IP地理位置2010-07-07
這篇文章主要介紹了js實現(xiàn)按鈕顏色漸變動畫效果的方法,涉及javascript鼠標(biāo)事件及頁面表單元素樣式的動態(tài)操作技巧,需要的朋友可以參考下2015-08-08
js下利用userData實現(xiàn)客戶端保存表單數(shù)據(jù)
對于多數(shù)網(wǎng)頁制作的朋友，實現(xiàn)在客戶端保存在網(wǎng)頁表單上的信息，比較多的是采用Cookie技術(shù)來實現(xiàn)，這些功能例如：下拉列表框選擇的選項，文本框輸入的數(shù)據(jù)等。2010-06-06
JavaScript實現(xiàn)控制并發(fā)請求的方法詳解
這篇文章主要為大家詳細(xì)介紹了如果有100個請求,那么如何使用JavaScript實現(xiàn)控制并發(fā)請求,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一2024-03-03
本文將開發(fā)一個簡易的微信跑步小程序，用到的方法是wx.onLocationChange，可以監(jiān)聽實時地理位置變化事件，感興趣的小伙伴可以了解一下2022-08-08
這篇文章主要給大家?guī)砦鍌€好看的基于 HTML+CSS+JS 的煙花特效，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2022-01-01
bootstrapvalidator之API學(xué)習(xí)教程
這篇文章為大家分享了bootstrapvalidator之API學(xué)習(xí)教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
React Hook 是 React 16.8 版本引入的一項新特性，它能夠讓函數(shù)組件擁有類組件中的狀態(tài)(state)和生命周期方法(lifecycle methods)等功能。Vue 3.x 開始引入了 Hooks API，用于在函數(shù)式組件中實現(xiàn)狀態(tài)和生命周期的管理。本文介紹的非常詳細(xì)，需要的朋友可以參考下2023-04-04
TypeScript使用函數(shù)重載確定返回類型的實現(xiàn)方法
這篇文章主要介紹了TypeScript使用函數(shù)重載確定返回類型的實現(xiàn)方法，文中通過代碼示例講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03