后台接口请求过快导致loading闪烁问题处理

方案一: 

1、请求前肯定是loading开启的,这是前提。
在这个前提之下:

this.loading=true;//开启加载动画
let number=0;
let interval=setInterval(()=>{
    number++
},1000)//1000毫秒加一次。
//请求发起。
ajax.post(
    ){(res)=>{
        //此时无论是成功还是其他错误,代码错误除外。都是拿到了返回数据。
        //判断上面的number增加到多少了。
        if(number>=2){//数字增长到2表示到了2000毫秒(定时器里面1000毫秒增加一次)
           this.loading=false;//关闭加载动画
        }else{
            //如果没增加到2,表示时间还没到2000毫秒就已经拿到数据了。这么快拿到数据loading又不想关闭?那设置一次性定时器在一秒后关闭loading就好啦。
            setTimeout(()=>{
                this.loading=false;//关闭加载动画
            },1000)
            // 同时考虑到性能,别忘了关闭上面的循环定时器。
            clearInterval(interval)
        }
    }}

方案二:

// 接口请求太快导致闪烁问题处理
        loading(Promise,ms){
            const timeout = ms => new Promise((_, reject) => setTimeout(() => reject(Symbol.for('timeout')), ms));
            return Promise.race([ajaxPromise, timeout(ms)])
            .then((res)=>{return res})
            .catch(err => {
                if (Symbol.for('timeout') === err) {
                    // loadin开始
                return ajaxPromise
                    .then((res)=>{return res})
                    .catch()
                    .finally(() => {
                        // loadin结束
                    });
                }
                return "";
            });
        },

loading(promise请求,1000)//第一个参数是promise请求,第二个参数是毫秒数

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值