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

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

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

那么此時(shí)我們就需要

并發(fā)請(qǐng)求

首屏加載的onload中同時(shí)請(qǐng)求兩次

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ù)組是通過請(qǐng)求回來再在回調(diào)里存到數(shù)組中的，
由于網(wǎng)絡(luò)的不可控性，我們不知道哪個(gè)請(qǐng)求會(huì)先被返回回來，那么如何保證順序呢

錯(cuò)誤做法：

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

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

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

2.給每一個(gè)請(qǐng)求傳入不同的回調(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這種變量作為索引，但是這種方式會(huì)增加代碼量，會(huì)產(chǎn)生許多重復(fù)的冗余代碼

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

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