前端優化處理大數據量

當有些地方不便於分頁處理，但數據量較大時，頁面往往出現卡死或者用戶等待時間過長問題

解決：

// data為所有數據的數組 ， callback 拿到當數據要做的操作 ,pageSize 一次取多少條
export function UtilHandleBigData(data, callback, pageSize = 100) {
  let totalCount = data.length; // 共多少條
  let currentPageNumber = 1; // 當前頁數
  let totalPageNumer = Math.ceil(totalCount / pageSize); //可分多少頁,就是分割為多少個小數組
  
  let handler = () => {
    let start = (currentPageNumber - 1) * pageSize;
    let end = currentPageNumber * pageSize;
    let currentData = data.slice(start, end); // 當前頁的數據
    if (typeof callback === "function") {
      callback(currentData, {
        totalCount,
        totalPageNumer,
        currentPageNumber,
        pageSize,
      });
    }
    // console.log(
    //   `共${totalCount}條,共${totalPageNumer}頁,當前第${currentPageNumber}條`
    // );
　　// 未執行完，繼續執行

    if (currentPageNumber < totalPageNumer) {
      window.requestAnimationFrame(handler);
    }
    currentPageNumber++;
  };
  handler();
}

調用：

let allData = [0, 1, 2 /**...很多條*/];
// data 為分割的小數組
UtilHandleBigData(allData, data => {
  // do something...
});