javascript - jQuery AJAX循环刷新jQueryUI ProgressBar

我有一个jQueryUI进度栏，应显示已完成查询的百分比。 Oracle有一个不错的系统表，可让您查看将花费10秒钟以上的操作。我试图对此查询进行交错的$ .ajax调用，以刷新进度栏。

问题是，我可以获取循环以进行快速启动请求，而无需等待任何时间，或者只是延迟整个JavaScript的执行时间。

我通过在jQueryUI对话框中单击“执行”按钮来启动第一个请求。

$("#dlgQuery").dialog({
    buttons: {
        Execute: function () {
            $(this).dialog("close");
            StartLoop();
        }
    }
});

我正在尝试构建StartLoop()函数或进行递归GetProgress()函数。理想情况下，我将有一个公共(public)变量var isDone = false充当我的指示器，以指示何时终止循环或停止递归调用该函数。

为了简单起见，我只做了一个执行100次的静态循环:

function StartLoop(){
    for (var i = 0; i < 100; i++) {
        GetProgress();
    }
}

这是我的示例ajax请求:

function GetProgress() {
    $.ajax({
        url: "query.aspx/GetProgress",
        success: function (msg) {
            var data = $.parseJSON(msg.d);
            $("#pbrQuery").progressbar("value", data.value);
            //recursive?
            //GetProgress();

            //if (data.value == 100) isDone = true;
        }
    });
}

到目前为止，我发现的是:
setTimeout(GetProgress(), 3000)中的StartLoop()卡住Javascript，并且对话框不会关闭(我想是因为这将等待查询完成)。

This一个，pausecomp(3000)做同样的事情。

如果我在AJAX请求的“成功”函数中调用了其中任何一个，它将被忽略(可能是因为它是异步启动另一个调用)。

我有点卡在这里，任何帮助，将不胜感激，谢谢。

最佳答案

而不是setTimeout(GetProgress(), 3000)，您需要:

function StartLoop(){
    for (var i = 0; i < 100; i++) {
        setTimeout(GetProgress(), 3000*i);
    }
}

否则，所有100个设备将在3秒后熄灭。相反，您需要0、3000、6000、9000等，即3000*i;

更好的，可以使用setInterval和clearInterval:

var myInterval = setInterval(GetProgress(), 3000);

然后在回调中执行以下操作:

$.ajax({
    url: "query.aspx/GetProgress",
    success: function (msg) {
        var data = $.parseJSON(msg.d);
        $("#pbrQuery").progressbar("value", data.value);

        if (data.value == 100) {
            isDone = true;
            clearInterval(myInterval);
        }
    }
});

clearInterval将阻止它再次调用GetProgress()。使用setInterval方法意味着您不必预先知道需要多少轮询循环。它会一直持续到完成为止。

或更好的是，您可以从ajax回调中调用GetProgress()，其优势在于，只有在查询响应后，它才会再次轮询:

function GetProgress() {
    $.ajax({
        url: "query.aspx/GetProgress",
        success: function (msg) {
            var data = $.parseJSON(msg.d);
            $("#pbrQuery").progressbar("value", data.value);

            if (data.value == 100) {
                isDone = true;
            } else {
                setTimeout(GetProgress(), 2000);
            }
        }
    });
}

然后只需调用GetProgress()一次即可启动循环。