JavaScript利用事件循環(huán)實現(xiàn)數(shù)據(jù)預(yù)加載
背景
有一個從后端獲取的數(shù)據(jù)列表,每頁請求10條,每次下拉到底部的是時候請求下一頁。目前做法是,請求下一頁的時候底部顯示loading,有個問題就是如果接口返回比較慢,loading則會顯示的比較久
什么是事件循環(huán)
假如你是一個餐館老板,你有一個主要工作臺(主線程)和兩個不同的便簽板,一個貼在工作臺旁(微任務(wù)板),另一個掛在門邊(宏任務(wù)板)。
同步任務(wù):任何走進餐館直接點菜的顧客,你立即處理他們的訂單,相當于同步任務(wù),直接在主線程上執(zhí)行。
微任務(wù)(快速便簽板) :現(xiàn)在,假設(shè)顧客吃飯過程中,要求加一杯水。你告訴他們“稍等,我馬上來”,然后迅速在微任務(wù)板上寫下“送水”(微任務(wù)),然后繼續(xù)處理當前排隊的客戶。處理完排隊的客戶轉(zhuǎn)身就能看到并立刻執(zhí)行快速便簽板上的微任務(wù)。
宏任務(wù)(門邊便簽板) :而對于預(yù)約外賣的顧客,你記錄下來,貼在門邊的宏任務(wù)板上,這些任務(wù)相對不那么緊急,你打算在完成當前所有桌面上的服務(wù)后,以及處理完微任務(wù)板上的所有小事后,再去查看并逐一完成。比如,制作外賣、清理餐桌等,這些任務(wù)耗時較長,不會立刻執(zhí)行,但也不會忘記做。
事件循環(huán)怎么和數(shù)據(jù)預(yù)加載關(guān)聯(lián)起來
當我們請求好第一頁數(shù)據(jù)后,將請求下一頁放到異步任務(wù)隊列里(宏任務(wù)或者微任務(wù)),等當前同步任務(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ù)都被放進異步隊列了,上一個還沒被執(zhí)行,就會造成任務(wù)積壓??梢酝ㄟ^ setTimeout
自調(diào)用解決積壓,但是解決不了高負載情況下的延遲
- 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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript模擬鼠標點擊事件原理和實現(xiàn)方法
本文詳細介紹了JS模擬鼠標點擊事件的原理以及應(yīng)用場景,并提供了模擬鼠標左鍵點擊事件、右鍵點擊事件、滾輪事件和移動事件的代碼實現(xiàn),了解JS模擬鼠標點擊事件的原理和實現(xiàn)方法對于開發(fā)人員非常重要,這對于許多面向用戶的web應(yīng)用程序的開發(fā)和測試都具有很重要的意義2023-09-09基于element?UI?input組件自行封裝“數(shù)字區(qū)間”輸入框組件的問題及解決
這篇文章主要介紹了基于element?UI?input組件自行封裝“數(shù)字區(qū)間”輸入框組件,實現(xiàn)代碼可以分為兩塊一塊為組件的封裝代碼,一塊為文中實現(xiàn)效果的演示代碼,對element?UI數(shù)字區(qū)間輸入組件相關(guān)知識感興趣的朋友一起看看吧2022-05-05vscode錄音及語音實時轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件附踩坑日記!
以目前的vscode版本來說,作者并沒有開放訪問本地媒體權(quán)限,所以插件市場里面的所有語音相關(guān)插件也并沒有直接獲取vscode的媒體權(quán)限,這篇文章主要介紹了vscode錄音及語音實時轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件?踩坑日記!,需要的朋友可以參考下2023-05-05JavaScript實現(xiàn)簡易購物車最全代碼解析(ES6面向?qū)ο?
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易購物車最全代碼,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09uni-app小程序中父組件和子組件傳值的實現(xiàn)實例
uniapp父子組件引用傳值,和vue的一樣,沒有小程序那樣的麻煩,下面這篇文章主要給大家介紹了關(guān)于uni-app小程序中父組件和子組件傳值的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08