Tab切换过快导致数据紊乱

例:切换官方时正在loading改为切换HASH

这是一个典型左侧切换tab,右侧内容区根据tab切换刷新请求数据,当我们切换tab内容正在loading中再次切换其他tab就会导致数据紊乱

初步解决以为是第二个接口比第一个快导致,所以我写了一个任务队列

// 创建搜索请求队列
const Queue = [];

// 队列中的搜索请求处理函数
export const  processQueue = ()=> {
  if (Queue.length > 0) {
    const Request = Queue[Queue.length - 1]; // 取出队列中最后一个搜索请求
    console.log(Request);
    Request()
      .then(() => {
        // 搜索请求成功后继续处理下一个搜索请求
        Queue.pop();
        processQueue();
      })
      .catch(() => {
        // 处理搜索请求失败的情况
      });
  }
};

// 添加搜索请求到队列
export const  addToQueue = (Request) =>{
  Queue.push(Request);
  if (Queue.length === 1) {
    // 如果当前队列为空,则开始处理队列
    processQueue();
  }
};

// 在搜索框输入时调用的函数
export const  queueRequest = (asyncFun) =>{
  // 定义搜索请求函数并添加到队列
  const Request =  asyncFun;
  addToQueue(Request);
};

当我们试用queueRequest 函数连续调取接口时,第一个接口完成才回去执行第二个接口,但是bug依在。

网上还有一种方法就是要修改底层axios去解决,这种方法不顺我心,所以没去做。

最后解决方法还是我把问题想的太复杂了,在接口函数中增加tab的校准再赋值

    //切换tab
    handleChangeTab (tab) {
      this.currentTab = tab;
      this.getList();
    },
    async getList () {
      //增加tab标识
      const tab = this.currentTab;
      const params = {
        xx:xx
      };
      this.loading = true;
      try {
        const result = await this.$api.xxxx(params)
        if (result.status == 10000) {
          // fix:  避免快速点击照成界面数据错误
          if (this.currentTab === tab) {
            this.listData = result.data;
          }
        }
      } catch (error) {
        return [];
      } finally {
        if (this.currentTab === tab) {
          this.loading = false;
        }
      }
    },

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
当我们在使用tab切换时,有时候希望在切换回原来的tab时能够保留之前输入的数据。要实现这个功能,可以使用以下方法: 一种简单的方法是在每个tab中使用隐藏字段或cookie来保存数据。当用户在一个tab中输入数据时,将数据保存到隐藏字段或cookie中。当切换到另一个tab时,将之前保存的数据从隐藏字段或cookie中取出并显示在新的tab中。这种方法的好处是实现简单,但是需要考虑数据的安全性和隐私问题。 另一种方法是使用JavaScript来实现。在每个tab中使用JavaScript来保存数据。当用户在一个tab中输入数据时,将数据保存到JavaScript变量中。当切换到另一个tab时,将之前保存的数据JavaScript变量中取出并显示在新的tab中。这种方法确保了数据的安全性,但是需要在每个tab中编写相应的JavaScript代码。 除了以上两种方法,还可以使用数据库来保存数据。当用户在一个tab中输入数据时,将数据保存到数据库中。当切换到另一个tab时,从数据库中读取之前保存的数据并显示在新的tab中。这种方法适用于需要持久保存数据的场景,但是需要额外的开发和数据库操作。 总的来说,要实现在tab切换后保留数据,可以使用隐藏字段、cookie、JavaScript变量或数据库来保存数据,并在切换到相应的tab时取出数据显示。选择合适的方法取决于具体的需求和开发资源。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值