背景

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

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

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

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

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

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

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

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

實(shí)現(xiàn)

請(qǐng)求數(shù)據(jù)

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

請(qǐng)求下一頁(yè)，異步任務(wù)

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

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

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

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

擴(kuò)展

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

舉個(gè)例子，我們寫了一個(gè)setInterval(() => {}, 1000),1000毫秒后setInterval回調(diào)任務(wù)會(huì)被放入異步任務(wù)隊(duì)列，如果同步任務(wù)還沒(méi)執(zhí)行完成，這個(gè)異步任務(wù)會(huì)被推遲，如果，又過(guò)了1000毫秒，下一個(gè)異步任務(wù)都被放進(jìn)異步隊(duì)列了，上一個(gè)還沒(méi)被執(zhí)行，就會(huì)造成任務(wù)積壓?？梢酝ㄟ^(guò) 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);
        }
    }
    
    // 立即開(kāi)始第一次執(zhí)行
    execute();
}

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

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

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

最新評(píng)論