想实现一个进度条动态更新

Question

想实现一个进度条动态更新：在for中循环一个ajax，若是同步，页面卡死，等所有ajax执行完毕后，进度条直接到达100%，如果异步，会先执行for循环，导致我的暂停不能使用，想要的效果是每循环一次，ajax执行一次，回调函数执行一次

function updata(){
        var ajax = new $ax(Feng.ctxPath + "/device/oriDataByYear", function (data) {
            for(var key in data){
                var tableName = data[key][0];
                var startTime = data[key][1];
                var endTime = data[key][2];
                var num = data[key][3];
                var count = Math.floor(num/100);
                total += parseInt(num);
                for(let j = 0; j <= count; j++){
                                    if(start){
                    aj3(tableName,startTime,endTime,j,start);
                                        }
                                }
            }
        });
        ajax.set('tableid',$("#tableid").val());
        ajax.set('startTime',$("#startTime").val());
        ajax.set('endTime',$("#endTime").val());
        ajax.start();
    }
    //单张表更新历史数据
    function aj3(tableName,startTime,endTime,j,start){
        if (start == true) {
            $.ajax({
            type: 'get',
            url: Feng.ctxPath + "/device/getDataByTableId",
            data: {
                "startTime": startTime,
                "tableName": tableName,
                "endTime": endTime,
                "num": j * 100,
                "formula": $("#formula").val(),
            },
            async: true,
            success: function (da) {
                init(da)
            }
            });
        }
    }

    //更新进度条
    function init(da){
        flag += da;
        element.progress('demo', Math.floor((flag / total) * 100) + '%');
        if (flag >= total) {
            $("#end").show();
            $("#stop").hide();
            Feng.success("历史数据更新成功！");
        }
    }
        //暂停
        $("#stop").click(function () {
        start = false;
        $("#end").html("退出");
        $("#end").show();
        $("#stop").hide();
    });

Answer 1

这么看来可以试试用同步方式，但是需要将后面的暂停绑定事件挪到前面先执行。