最近在公司實(shí)習(xí)寫的是es5，在和回調(diào)地獄經(jīng)過一番拉扯之后寫下這篇文章，也算是體驗(yàn)了一把沒有promise的時代
假設(shè)我們的div有一個日歷列表，但是由于大小關(guān)系只能每次顯示2天的信息，項(xiàng)目限制只能使用es5，不能使用es6的promise,且后端給我們的接口只能每次請求一個具體日期的數(shù)據(jù)
例如

getDateInfo(2023,7,26)//return
{
date:'12',
lunar:'五月廿五'，
weekday:'周六'
}

現(xiàn)在的需求是首屏加載2個item,有些人會覺得這還不簡單嗎，先請求第一個，再在回調(diào)里面請求第二個
確實(shí)如此，那假如我們有20個，200個item呢，就會掉入回調(diào)地獄，還有一個問題就是前面的請求失敗會導(dǎo)致后面的請求無法執(zhí)行（即使后面的請求單獨(dú)可用）

那么此時我們就需要

并發(fā)請求

首屏加載的onload中同時請求兩次

getListItem(date) {var success = function(res) {console.log(res.date)//更新數(shù)據(jù)和視圖
}
getDateInfo(2023,7,date,success)
getDateInfo(2023,7,date+1,success)
}getListItem(date)

那么新的問題來了，我們的日期列表需要按順序展示，但是我們本地的數(shù)組是通過請求回來再在回調(diào)里存到數(shù)組中的，
由于網(wǎng)絡(luò)的不可控性，我們不知道哪個請求會先被返回回來，那么如何保證順序呢

錯誤做法：

使用閉包傳參，在回調(diào)中用參數(shù)當(dāng)索引修改數(shù)組，例如上面?zhèn)鞯膁ate和date+1,因?yàn)樵趫?zhí)行回調(diào)的時候所有同步代碼已經(jīng)執(zhí)行完畢，既然傳的是同一個回調(diào)函數(shù)的地址，那么找到的是同一個作用域，里面的date已經(jīng)遞增完畢，所以所有回調(diào)取到的都是date+1，也就是最后一個傳入值

es5保證回調(diào)順序的兩種正確方式

1.接口返回我們傳入的參數(shù)，或者能當(dāng)作順序標(biāo)識符號的屬性，例如id，然后我們在給數(shù)組賦值的時候，對id做處理得出數(shù)據(jù)先后順序的索引index，再用arr[index]為數(shù)組賦值，因?yàn)槭欠祷氐臄?shù)據(jù)，所以總能取到正確的值，這種方式要求接口要返回對應(yīng)的標(biāo)識或者順序?qū)傩?#xff0c;不過絕大部分接口都會有

2.給每一個請求傳入不同的回調(diào)函數(shù)（引用地址不同），例如

var success1 = function(res) {console.log(res.date)//更新數(shù)據(jù)和視圖
}
var success2 = function(res) {console.log(res.date)//更新數(shù)據(jù)和視圖
}
getDateInfo(2023,7,date,success1)
getDateInfo(2023,7,date+1,success2)

那么我們就可以在各自的回調(diào)函數(shù)中寫入固定的索引去更新數(shù)據(jù)和視圖，而不是使用index這種變量作為索引，但是這種方式會增加代碼量，會產(chǎn)生許多重復(fù)的冗余代碼

如果有別的可以保證返回順序的方式，歡迎評論區(qū)討論

本文由Escaay原創(chuàng)，轉(zhuǎn)載請注明出處