JS - 处理连续点击发送的多个请求

最新推荐文章于 2024-07-05 13:56:30 发布

jnChen10

最新推荐文章于 2024-07-05 13:56:30 发布

阅读量2.8k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/sinat_33184880/article/details/102522418

版权

在处理连续点击列表选项时，可能出现由于请求顺序导致的数据展示错误。理想情况是按点击顺序展示数据，但实际可能因请求回调顺序不一致而出现问题。解决方法是使用一个请求队列，只保留最后一个请求，确保页面展示最新点击选项的数据。这里展示了一个使用定时器的小程序request函数封装示例。

摘要由CSDN通过智能技术生成

在处理以下列表中，如果过于频繁点击选项（红色框），可能会出现数据展示错误的情况（请求函数相同，只有查询参数不同）

async loadGood (params) {
  let res = await app.request(api.loadGood, params)
  if (res.code === 1) {
    let { list } = this.data
    let _list = res.data.data
    
    if (_list.length !== 0) {
      list = list.concat(_list)
      this.setData({ list })
    }
  }
}

例如连续点击A、B选项（发送了A、B请求），理想情况下A先完成回调，页面拿到A请求返回的数据，然后B完成回调，页面拿到B请求返回的数据，最终页面展示B接口的数据

不理想的情况下，A请求回调比B请求还慢，于是B先执行回调了，页面先拿到了B请求返回的数据，然后A才完成回调，页面最终展示A请求返回的数据，这时出现展示的BUG（最后点击B选项，而展示的确实A选项接口的数据）

解决方法是用一个数组A记录每一次操作中发送的请求，当队列的最后一个请求完成，页面取最后一个请求返回的数据，并清空数组A