1. 程式人生 > >js實現所有非同步請求全部載入完畢後,loading效果消失

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效果圖消失');
    })

 

頁面控制檯列印效果:

 

 

 

好了已經很晚了,各位晚安早點睡覺,保護好自己的頭髮~~~