短时间内多次查询表格数据渲染问题

Posted 2021-02-13 yangal

需求：页面上方有许多标签，每点击一个标签或者取消一个标签都会调用接口查询数据，渲染到表格中。

问题1：当数据较多时，表格渲染的比较慢

问题2：当点击过快时，可能标签1对应的接口的返回数据1还没返回的时候，又点击了标签2，对应的接口返回的数据2返回开始渲染，数据2渲染一半时，数据1也回来了也开始渲染，导致表格渲染的数据不准确，可能只有一部分2，也可能有一部分2也有一部分1

解决1:可以先将表格的一部分数据渲染出来，然后慢慢添加，核心代码：

const chunkData = this.getChunk(objData.dataList)
let chunkStep = 0
this.tableDataObj.dataList.push(...chunkData[chunkStep])
chunkStep++
this.queryProcess = setInterval(() => {
    if (chunkData[chunkStep]) {
      this.tableDataObj.dataList.push(...chunkData[chunkStep])
      chunkStep++
    } else {
      clearInterval(this.queryProcess)
      this.queryProcess = 0
    }
}, 200)

getChunk (arr) { // 获取分隔后的数据集合
  const stepArr = [0, 0.05, 0.1, 0.3, 0.6, 1]
  const arrLen = arr.length
  return Array.from({ length: 5 }, (ignore, i) => arr.slice(Math.ceil(arrLen * stepArr[i]), Math.ceil(arrLen * stepArr[i + 1])))
}

解决2：每次点击都用一个时间戳标记，每次只渲染对应的时间戳的数据，否则返回，时间戳1 timesTamp赋值给this.lastGetTableDateTimesTamp，时间戳2timesTamp也赋值给this.lastGetTableDateTimesTamp。当时间戳1对应的数据返回时，this.lastGetTableDateTimesTamp已被修改，对应不上，直接return不再渲染数据1，只渲染数据2，核心代码：

const timesTamp = new Date()
this.lastGetTableDateTimesTamp = timesTamp
try {
    const res = await this.$http.post(url, params)
    if (this.lastGetTableDateTimesTamp !== timesTamp) {
      return
    }
}

全部代码：

//查询表格数据
async queryData (flag) {
  const timesTamp = new Date()
  this.lastGetTableDateTimesTamp = timesTamp
  this.initStatusTagsPanel()
  if (!flag) {
    this.searchwordCur = this.keyword
  }
  const url = this.api.claimCustomer.queryData
  const batch = 0
  const keyword = this.keyword
  const pageIndex = this.withPage.pageIndex
  const pageSize = this.withPage.pageSize
  const queryFields = this.queryFields
  const tags = this.tags
  const order = this.order
  //获取可见公共库
  // const publicStorageIds = this.timeAndId.IdArray
  let params = {
    batch,
    keyword,
    pageIndex,
    pageSize,
    queryFields,
    order,
    tags
    // publicStorageIds
  }
  try {
    this.loading = true
    const res = await this.$http.post(url, params)
    if (!this.haveLabel) {
      await this.getLimitTime()
    }
    if (this.lastGetTableDateTimesTamp !== timesTamp) {
      return
    }
    let objData = {}
    if (res.data && res.data.code === 200 && res.data.data) {
      objData = await common.handleData(this.timeAndId, res.data.data)
    } else {
      objData = { dataList: [] }
    }
    this.loading = false
    this.haveLabel = false
    if (objData.dataList.length) {
      if (this.queryProcess) {
        clearInterval(this.queryProcess)
        this.queryProcess = 0
      }
      //表格置空
      this.tableDataObj = {}
      this.tableDataObj.dataList = []
      //添加内容
      this.tableDataObj.pageIndex = objData.pageIndex || 0
      this.tableDataObj.pageSize = objData.pageSize || 0
      this.tableDataObj.total = objData.total || 0
      const chunkData = this.getChunk(objData.dataList)
      let chunkStep = 0
      this.tableDataObj.dataList.push(...chunkData[chunkStep])
      chunkStep++
      this.queryProcess = setInterval(() => {
        if (chunkData[chunkStep]) {
          this.tableDataObj.dataList.push(...chunkData[chunkStep])
          chunkStep++
        } else {
          clearInterval(this.queryProcess)
          this.queryProcess = 0
        }
      }, 200)
    } else {
      this.tableDataObj = objData
    }
  } catch (e) {
    this.common.handleError(e, this)
    this.loading = false
    this.haveLabel = false
  }
},
//拆分数据
getChunk (arr) { // 获取分隔后的数据集合
  const stepArr = [0, 0.05, 0.1, 0.3, 0.6, 1]
  const arrLen = arr.length
  return Array.from({ length: 5 }, (ignore, i) => arr.slice(Math.ceil(arrLen * stepArr[i]), Math.ceil(arrLen * stepArr[i + 1])))
},