背景

有一個從后端獲取的數(shù)據(jù)列表，每頁請求10條，每次下拉到底部的是時候請求下一頁。目前做法是，請求下一頁的時候底部顯示loading，有個問題就是如果接口返回比較慢，loading則會顯示的比較久

什么是事件循環(huán)

假如你是一個餐館老板，你有一個主要工作臺（主線程）和兩個不同的便簽板，一個貼在工作臺旁（微任務(wù)板），另一個掛在門邊（宏任務(wù)板）。

同步任務(wù)：任何走進(jìn)餐館直接點菜的顧客，你立即處理他們的訂單，相當(dāng)于同步任務(wù)，直接在主線程上執(zhí)行。

微任務(wù)（快速便簽板） ：現(xiàn)在，假設(shè)顧客吃飯過程中，要求加一杯水。你告訴他們“稍等，我馬上來”，然后迅速在微任務(wù)板上寫下“送水”（微任務(wù)），然后繼續(xù)處理當(dāng)前排隊的客戶。處理完排隊的客戶轉(zhuǎn)身就能看到并立刻執(zhí)行快速便簽板上的微任務(wù)。

宏任務(wù)（門邊便簽板） ：而對于預(yù)約外賣的顧客，你記錄下來，貼在門邊的宏任務(wù)板上，這些任務(wù)相對不那么緊急，你打算在完成當(dāng)前所有桌面上的服務(wù)后，以及處理完微任務(wù)板上的所有小事后，再去查看并逐一完成。比如，制作外賣、清理餐桌等，這些任務(wù)耗時較長，不會立刻執(zhí)行，但也不會忘記做。

事件循環(huán)怎么和數(shù)據(jù)預(yù)加載關(guān)聯(lián)起來

當(dāng)我們請求好第一頁數(shù)據(jù)后，將請求下一頁放到異步任務(wù)隊列里（宏任務(wù)或者微任務(wù)），等當(dāng)前同步任務(wù)執(zhí)行完成后，立馬請求下一頁數(shù)據(jù)

實現(xiàn)

請求數(shù)據(jù)

// 從服務(wù)器請求數(shù)據(jù)
loadData(page) {
  // '''''
  return list
}

請求下一頁，異步任務(wù)

• 小程序?qū)崿F(xiàn)

//-------------------------頁面初始化的時候---------------------------------------
this.setData({
    list: await loadData(page)
})
// wx.nextTick創(chuàng)建異步任務(wù)，等待空閑后執(zhí)行
wx.nextTick(async () => {
   // 下一頁數(shù)據(jù)先放在變量里面存起，等滑動到底部的時候?qū)extList追加到list,并且預(yù)請求再下一頁
   const nextList = await loadData(page + 1)
})
//-------------------------頁面下滑到底部的時候---------------------------------------
this.setData({
    list: [...this.data.list, ...nextList]
})
// wx.nextTick創(chuàng)建異步任務(wù)，等待空閑后執(zhí)行
wx.nextTick(async () => {
   // 下一頁數(shù)據(jù)先放在變量里面存起，等滑動到底部的時候?qū)extList追加到list,并且預(yù)請求再下一頁
   const nextList = await loadData(page + 1)
})

• 非小程序?qū)崿F(xiàn)

// 創(chuàng)建一個異步任務(wù)
 MicroTasks(callback: () => {}) {
    Promise.resolve().then(() => {
        callback()
    })
 }
 
 // 將上述wx.nextTick換成MicroTasks，其他不變
  MicroTasks(async () => {
     const nexList = await loadData(page + 1)
 })

擴展

由上面的事件循環(huán)例子可以知道，異步任務(wù)是需要等同步任務(wù)全部執(zhí)行完成了才會被執(zhí)行，那如果到異步任務(wù)應(yīng)該執(zhí)行的時間點了，同步任務(wù)還沒有執(zhí)行完，那異步任務(wù)就會被推遲

舉個例子，我們寫了一個setInterval(() => {}, 1000),1000毫秒后setInterval回調(diào)任務(wù)會被放入異步任務(wù)隊列，如果同步任務(wù)還沒執(zhí)行完成，這個異步任務(wù)會被推遲，如果，又過了1000毫秒，下一個異步任務(wù)都被放進(jìn)異步隊列了，上一個還沒被執(zhí)行，就會造成任務(wù)積壓?？梢酝ㄟ^ setTimeout自調(diào)用解決積壓，但是解決不了高負(fù)載情況下的延遲

• setTimeout自調(diào)用例子

let timeoutId;

function customInterval(callback, delay) {
    function execute() {
        // 執(zhí)行你的任務(wù)...
        callback();
        
        // 根據(jù)任務(wù)執(zhí)行情況決定是否繼續(xù)調(diào)用
        if (/* 需要繼續(xù)執(zhí)行的條件 */) {
            timeoutId = setTimeout(execute, delay);
        }
    }
    
    // 立即開始第一次執(zhí)行
    execute();
}

// 使用示例
customInterval(() => {
    console.log('執(zhí)行中...');
    // ...你的任務(wù)代碼
}, 1000); // 延遲1000毫秒

// 如果需要停止循環(huán)，可以通過 clearTimeout(timeoutId); 來實現(xiàn)

到此這篇關(guān)于JavaScript利用事件循環(huán)實現(xiàn)數(shù)據(jù)預(yù)加載的文章就介紹到這了,更多相關(guān)JavaScript數(shù)據(jù)預(yù)加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論