当后端直接返回了一千条数据给我

前言

有个需求是这样的，在订单支付页，有个订单明细的按钮，鼠标放上去显示出所有的订单明细，订单明细由后端接口返回数组，然后前端直接渲染进去，很简单的功能，但是做完却被提bug了

理由是鼠标移上去总是要等2~3秒才会显示出明细，我一看，好家伙，测试直接传了1000条订单，导致接口返回的明细有1000条，然后一次性渲染1000条数据导致页面卡顿了

解决

方案一 加分页

首先想到的方案是做让后端做分页，前端在弹窗底部多加个页码，点击页码把对应的分页传给后端

但是后端说不想改。。。 产品也不想再弹窗底部加页码

方案一卒

方案二 分批加载

原理：把所有数据分成若干组，用定时器分批次渲染

比如后端一次性返回1000条，那我分成100个一组，用定时器一组一组上传

直接看我项目里的实现吧

    // 逐步加载价格明细
    lazyLoad(isInit) {
      const list = this.curPriceInfo.orderDetailList.slice()// 拿到原数组并拷贝一份
      let sep = 200 // 分成200一组
      const res = [...list.splice(0, sep)] //默认先取前200个
      // isInit:首次填充，作占位撑开popver高度
      if (isInit || list.length === 0) {
        this.orderDetailList = res
        return
      }

      this.popTimer = setInterval(() => {
        if (list.length <= sep) {
          clearInterval(this.popTimer)
        }
        res.push(...list.splice(0, sep))
        this.orderDetailList = res
      }, 300)
    },

这种方式应该算比较好理解的，但是定时器多了的话也会耗资源

方案三 触底加载

这种方案有两种实现方式：

• 一是后端改接口，多加个分页，滑到底部的时候页码加1传给后端
• 二是前端自己模拟分页，本质也是按方案二那样先分组

可以用element的InfiniteScroll无限滚动判断触底

也可以自己用scrollTop + clientHeight >= innerHeight判断

这里就不写代码了，我项目中是采用方案二解决的

完事~