javascript - jQuery AJAX 循环刷新 jQueryUI ProgressBar

Question

我有一个 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) in StartLoop() 卡住 Javascript，并且对话框不会关闭(我假设，因为它会等到查询完成完成)。

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

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

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

Answer 1

代替 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() 即可启动循环。