layui table问题？

Question

请问table.render，在后端接口还没请求到时，能阻止渲染嘛？现在是这样的，进入页面加载表格数据，但是接口很慢，这时候页面有查询按钮，比如我查询了今天的数据，就会再次重载表格。但是，前面初始化的接口太慢了，导致新查询的已经渲染好了，过了十来秒，初始化的表格数据反而覆盖了查询的数据，这该怎么解决？？

Answer 1

1. 接口过了十多秒才响应，要排查一下接口为什么会久，太影响用户体验了
2. 在初始数据没来之前，加个loading优化一下

阻止渲染这种方法治标不治本，建议主要还是得排查一下为什么需要十几秒

Answer 2

即便是排除掉执行十几秒的问题，如果你的界面不做限制，用户多次点击查询，介于后台对于不同检索条件的效率不一样，都有可能造成后发送的请求先收到了响应。

这种情况，要不你就在前一个请求加载完成之前，直接给搜索按钮禁用掉，要不就加一个灵活的 🔒

let globalState = {
  state: '',
  update (state) {
    state = state || Math.random()
    this.state = state
    return this.state
  },
  check (state) {
    return !this.state || this.state === state
  },
  get () {
    return this.state
  },
}

function renderTable (state) {
  if (globalState.check(state)) {
    table.render()
  }
}

function search () {
  const newState = globalState.update()
  axios.post().then(v => {
    // 搜索请求
    renderTable(newState)
  })
}

// 首次
renderTable();

以上面的例子为例，首次加载页面时 globalState.state 肯定是空的，这时候如果没有点过其他搜索条件，在调用到 renderTable 时也是可以正常渲染的。

在搜索前生成一个新的 state，在响应后再把对应的 state 传过去进行比较，就能保证始终是最后一个请求调用的 table.render