阅读 56

前端优化处理大数据量

当有些地方不便于分页处理,但数据量较大时,页面往往出现卡死或者用户等待时间过长问题

解决:

// 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...
});

 

原文:https://www.cnblogs.com/Console-LIJIE/p/15343413.html

文章分类
百科问答
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐