layui中ajax请求圆圈载入动画

平时ajax请求时响应时间较长会设置一个转圈的载入动画,但是如果再加上数字表示百分比是不是更能减少用户使用中的焦虑呢?效果:

image-20201203100707934

以下以一个ajax请求为例:

$.ajax({
    url: "http://cway.top": function (XMLHttpRequest) {
        layer.load(1, {
            content: "<div style='margin-left:-23px;padding-top:44px;width:120px;color:#FFF;'>正在查询(<span id='loadProgress' >0</span>%)</div>",
            shade: [0.5, '#000']
        });
        start();
    }, success: function (result) {
        layer.closeAll();
        stop();
    }
});

上述在载入动画上加上正在查询的文字跟载入百分比,初始值0%。其中启动了一个start()方法启动定时器,在定时器中对百分比进行增加,我这里是设置每200ms增加5%:

    function show() {
        $("#loadProgress").text(parseInt($("#loadProgress").text()) + 5);
        if (parseInt($("#loadProgress").text()) >= 95) {
            stop();
        }
    }

    var timer;//定义在两个函数外面,因为两个函数都会用到!
    function start() {
        timer = window.setInterval(show, 200);//每隔200ms调用一次show函数
    }

    function stop() {
        timer = window.clearInterval(timer);
        $("#loadProgress").text(99);
    }

当大于95%时停止计时器,并将百分比固定在99%,如果请求一直没响应那就卡99了,不过一般请求一般都不会卡在这,毕竟请求长时间没响应的情况很少。