如何在长循环过程中显示JQuery弹出对话框(用于过程进度)

时间:2019-05-03 09:46:47

标签: javascript jquery devextreme

我正在使用JavaScript 我有一个for循环,每次调用ajax将数据发送到Web服务时,该循环循环约5000条记录。到现在为止一切正常。

,但是此过程需要60秒钟或更长时间。所以我需要显示一个进度弹出窗口。我创建了JQuery弹出窗口,并完成了进度栏。我的代码将首先打开进度窗口,并在循环中启动循环。当循环结束时,我将关闭进度窗口以更新进度。

当我运行代码时,进度窗口不会出现,但是当循环结束时它会出现并直接关闭。该怎么做。

  

示例代码

function AShowProgressDialog(dialog_name, CtrlListBox, CtrlFromDate, CtrlToDate, title){

$("#" + dialog_name ).dialog({

    dialogClass: "no-close",
            title: title,
            scrollable: false,
            height: 120,
            width: 550,
            resizable: false,
            modal: true,
    show: 'fade',
            hide: 'fade',
            closeOnEscape: false,
            autoOpen: true,
            stack: true,
            open: function(event, ui) {

            }
});

$("#" + dialog_name ).show();
};


function SubmitProcessRequest(CtrlListBox, CtrlFromDate, CtrlToDate, prProgressTitle){

AShowProgressDialog("pnlProgressCtrl", CtrlListBox, CtrlFromDate, CtrlToDate, prProgressTitle);

var strEmpList = ($.map( $("#" + CtrlListBox + "  option"), 
    function (item, i) { 
        return $.trim($(item).val()) ;// + "|" + $.trim($(item).text());
    } 
)).join(", ");

var FromDate = $('#' + CtrlFromDate).val();
var ToDate = $('#' + CtrlToDate).val();

var arrayEmpList = strEmpList.split(',');
var BatchSize = 30;
var count = Math.ceil(arrayEmpList.length / BatchSize);

for (var i = 0; i <  count; i++) { 

    var EmpDataToSend = strEmpList.split(',').slice(i*BatchSize, (i+1)*BatchSize);

    SEND DATA TO AJAX;

    $("#ctrlProgressBar").width( ((i / count) * 100)  + '%');

    $("#progressMessage").text( (i*BatchSize) + " of " + arrayEmpList.length);


}                   
closeDialog("pnlProgressCtrl");
}

这是jsfiddle https://jsfiddle.net/kifahnajem/f5yb3e8o/

0 个答案:

没有答案