如何实现一个实时更新的进度条

前言

博主近期接到一个任务，大概内容是：导入excel表格批量修改状态，期间如果发生错误则所有数据不成功，为了防止重复提交，做一个类似进度条的东东。

那么下面我会结合实际业务对这个功能进行分析和记录。

正文

思路

前端使用bootstrap，后端使用SpringBoot分布式到注册中心，原先的想法是导入表格后异步调用修改数据状态的方法，然后每次计算修改的进度然后存放在session中，前台jquery写定时任务访问获取session中的进度，更新进度条进度和百分比。但是这存在session在服务间不共享，跨域问题。那么换一个方式存放，存放在redis中，前台定时任务直接操作获取redis的数据。

实施

进度条

先来看一下bootstrap的进度条

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 40%;">
        40%
    </div>
</div>

进度条更新主要更新style="width: 40%;"的值即可，div里面的40%可以省略，无非时看着明确。

可以考虑将进度条放入弹出层。

定时任务

//点击确认导入执行此方法
function bulkImportChanges() {
    //获取批量操作状态文件
    var files = $("#importChanges").prop("files");
    var changesFile = files[0];
    var formData = new FormData();
    formData.append("importFile",changesFile);
    $.ajax({
        type : 'post',
        url : "/risk/bulk***es",
        data : formData,
        processData : false,      //文件ajax上传要加这两个的，要不然上传不了
        contentType : false,      //
        success : function(obj) {
            //导入成功
            if (obj.rspCode == "00") {
                //定时任务获取redis导入修改进度
                var progress = "";
                var timingTask = setInterval(function(){
                    $.ajax({
                        type: 'post',
                        url: "/risk/t***k",
                        dataType : 'json',