请问table.render,在后端接口还没请求到时,能阻止渲染嘛?现在是这样的,进入页面加载表格数据,但是接口很慢,这时候页面有查询按钮,比如我查询了今天的数据,就会再次重载表格。但是,前面初始化的接口太慢了,导致新查询的已经渲染好了,过了十来秒,初始化的表格数据反而覆盖了查询的数据,这该怎么解决??
- 接口过了十多秒才响应,要排查一下接口为什么会久,太影响用户体验了
- 在初始数据没来之前,加个loading优化一下
阻止渲染这种方法治标不治本,建议主要还是得排查一下为什么需要十几秒
即便是排除掉执行十几秒的问题,如果你的界面不做限制,用户多次点击查询,介于后台对于不同检索条件的效率不一样,都有可能造成后发送的请求先收到了响应。
这种情况,要不你就在前一个请求加载完成之前,直接给搜索按钮禁用掉,要不就加一个灵活的 🔒
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