定时器轮询功能，多次调用后端查询，直到获得想要的结果setInterval

使用场景

我们需要从服务器端获取一些未来一小段时间内可以确定的事情。比如最经典的场景就是：想象一个用户在网页端通过扫码进行支付，我们怎么判断用户支付的状态。

需求

这是一个上传文件功能，因为处理文件数据需要一定的时间，处理结果不是能够马上得到的，因此在前端写了一个功能，不断向后端发送请求，直到获得想要的处理结果.

页面展示

前端代码

//导入处理结果
var UploadProgressTimmer
upload.render({
    elem: '#importresult' //绑定元素
    , url: '{:url("uploadfile")}' //上传接口
    , data: {id: "{$info.id}"}
    , accept: 'file' //普通文件
    , exts: 'csv' //只允许上传表格文件
    , progress: function () { //这个主要是防止重复提交问题，加了个遮罩功能
        layer.load(0,{shade: [0.5, 'gray'],content: '数据导入中，请勿关闭页面',success: function (layero) {
                layero.find('.layui-layer-content').css({
                    'padding-top': '39px',
                    'width': '300px',
                    'font-size':'20px'
                });
            }
        });
    }
    , done: function (res) {//主要部分
        if (res.code === 200) {
            layer.load(0,{shade: [0.5, 'gray'],content: '数据导入中，请勿关闭页面',success: function (layero) {
                    layero.find('.layui-layer-content').css({
                        'padding-top': '39px',
                        'width': '300px',
                        'font-size':'20px'
                    });
                }
            });
            UploadProgressTimmer =  setInterval(() => {
                $.post('{:Url("getNewStatus")}', function (data) {
                    if (data.data.status !== 26022){ //当后台返回的状态码不为26022时，即是想要的结果
                        layer.closeAll();//关闭遮罩
                        clearInterval(UploadProgressTimmer);//出现想要的结果，停止重复提交
                        layer.alert(data.data.info,{
                            title: '信息'
                        },function () {
                            layer.closeAll();
                            location.reload();
                        });
                    }
                });
            }, 1000)
        }
    }
    });

后端代码

/**
 * 查询结果接口
 */
public function getNewStatus()
{
    //处理结果导入查询(新)
    $getStatus = Paas::request('/sim/finance/statement/aaaaaaaaaa',[]);
    $statusMessage = array(
        '26020'=>'处理结果导入失败,必填项不能为空。',
        '26011'=>'上传处理结果失败。',
        '26010'=>'上传处理结果成功。',
        '26022'=>'正常处理中。'
    );
    foreach ($statusMessage as $key=>$value){
        if ($getStatus['status'] == $key){
            $getStatus['info'] = $value;
        }
    }
    return jsonReturn($getStatus, '', 200);
}

实际效果

总结

核心就是setInterval(()）。

setInterval()函数的用法与setTimeout()完全一致，区别仅仅在于setInterval()指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。