js實現所有非同步請求全部載入完畢後，loading效果消失

在實際開發中，一定有情況是這樣的，一個頁面我們有多個地方請求了ajax，在這種情況下，我們要實現資料沒來之前出現我們炫酷的loading效果，而且要等到 所有 的ajax都請求完畢後，才讓我們的loading效果消失，那麼問題來了，每個ajax請求資料的時間都是不確定的，我們這個loading效果結束的邏輯又應該放到哪裡呢？就好比這樣（虛擬碼模擬）：

console.log('loading效果圖旋轉中')
var timer1 =setTimeout(() => {
console.log('第一個載入完成了');
}, '隨機的時間');
var timer2 =setTimeout(() => {
console.log('第二個載入完成了');
}, '隨機的時間');
var timer3 =setTimeout(() => {
console.log('第三個載入完成了');
}, '隨機的時間');

console.log('loading效果圖消失,我好慌，我應該放到哪裡')

第一種解決方案：我們設定一個標識，比如loadingNums，當loadingNums等於0的時候，我們讓loading消失，接下來看程式碼（應該用await和async來模擬的，但是重要的是思路，其他的不重要，你懂的）：

var loadingNums = 3;
console.log('loading效果圖旋轉中')
var timer1 =setTimeout(() => {
console.log('第一個載入完成了');
loadingNums--;
if(loadingNums==0){
console.log('loading效果圖消失')
}
}, 1000);
var timer2 =setTimeout(() => {
console.log('第三個載入完成了');
loadingNums--;
if(loadingNums==0){
console.log('loading效果圖消失')
}
}, 2000);
var timer3 =setTimeout(() => {
console.log('第二個載入完成了');
loadingNums--;
if(loadingNums==0){
console.log('loading效果圖消失')
}
}, 3000);

頁面控制檯列印效果：

  第二種解決方案：我們可以用ES6的Promise，如果有不瞭解Promise的同學自行去查詢相關文件，接下來開始我們的操作，Promise有一個all方法，接收一個引數，這個引數我們可以傳一個數組，在這個陣列中我們可以寫多個Promise，看到這裡你應該明白了，我們可以把所有的非同步操作都用Promise包起來，然後都放到這個陣列內（漂亮，給自己的聰明才智鼓個掌好不好），如你所想，這個all方法是可以等到陣列中所有的Promise載入完成之後才去執行的，那還等什麼，準備發車，看程式碼：

console.log('loading效果圖旋轉中')
var p1 = new Promise(function(resolve,reject){
setTimeout(() => {
console.log('第一個載入完成了');
resolve();
}, 1000);
})
var p2 = new Promise(function(resolve,reject){
setTimeout(() => {
console.log('第三個載入完成了');
resolve();
}, 2000);
})
var p3 = new Promise(function(resolve,reject){
setTimeout(() => {
console.log('第二個載入完成了');
resolve();
}, 3000);
})

Promise.all([p1,p2,p3]).then(function(){
console.log('loading效果圖消失');
})

頁面控制檯列印效果：