快取實作
背景：有時候介面回傳的資料短期內是不會改變的，可以對http介面回傳的資料加快取，即減少了后端請求，又加快了前端性能，真是一舉兩得！
實作原理：用js的Object物件即可實作快取，{} 表示一個js物件，物件屬性名是唯一的可以作為快取key,屬性值就是快取value
例如：
//定義快取 let cache = {} //設定值 cache['name'] = '張三' cache['age'] = 18 //獲取值 let name = cache['name'] let age = cache['age']
同步方案
方案一
ajax同步
方案二
加控制變數
由于js引擎單執行緒，串形執行，根據狀態判斷即可，isLoading由js引擎執行緒，ajax執行緒共同操作，為共享變數！js執行原理可見：https://blog.csdn.net/sdasadasds/article/details/125197852
下面是偽代碼
/** * 查詢資料 */ function getData(){ if(!isLoading){ //不是資料加載中，則可以開始加載 isLoading=true //http請求資料 ajax回呼 cache.put(key,data); isLoading=false; }else{ //資料加載中，則回圈延時等待資料 setTimeout(getCacheData,100) } } /** * 從快取中取資料 */ function getCacheData(){ let that = this if(!isLoading){ //不是加載中，即資料加載完畢，從快取中取資料 let data =https://www.cnblogs.com/hdwang/archive/2022/08/12/ cache.get(key) return data }else{ //還在加載中，延時遞回獲取 setTimeout(that.getCacheData, 100) } }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501743.html
標籤：其他