根据ajax获取数据大小做loading状态处理。

西岚
  • 2
新手上路,请多包涵

比如我在页面有一个请求,这个请求可能数据量很大,也可能很小,我想在他数据量大的时候有一个loading状态,数据量小就没有loading状态,直接加载
因为在实际开发中,如果不做这个判断,当数据量小的时候,loading会瞬间结束,在页面就是一闪而过,对用户体验很不好。

目前我们采用的方法就是一刀切,每次加载都有Loading,loading时间最低1秒,如果数据量大,则loading时间延长。

如果想做到,根据数据返回的时间做loading处理,该怎么做?

回复
阅读 1.7k
4 个回答

你可以在loading内部增加一个延时机制 设定一个最短时间来出发这个loading的效果 大致逻辑是这样的:

function loadingFx(delay){
    setTimeout(function(){
        loadingAnimate();
    },delay||0);
}

请求前开启一个定时器,定时器里面做显示loading的操作,时长视你的具体情况而定,同时保留定时器的应用;当结束后,清除定时器就好了

无论如何设置阀值,都可能只看到一闪而过的情况,或者等待很长(因为内容下载不光是文件大小相关,还和网络环境相关)
所以我建议统一设定loading
为了表示快,你可以设定一个最小loading展示时间,即使下载完成也要展示loading一小会儿。

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