Question

我有一个jQueryUI进度条，应该显示完成查询的百分比。 Oracle有一个很好的系统表，可以让你看到需要超过10秒的操作。我正在尝试对此查询进行交错的$ .ajax调用以刷新进度条。

问题是，我可以让循环在没有任何等待时间的情况下发出快速请求，或者只是延迟整个JavaScript的执行。

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

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

我正在尝试构建StartLoop()函数或创建递归GetProgress()函数。理想情况下，我将使用公共变量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)中的{p> 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()一次即可启动循环。

Answer 2

我相信你要做的就是在完成后再次调用getProgress函数。

您可以通过将“完整”参数添加到ajax调用

来完成此操作

$.ajax({
  //this is where your stuff already is
  ,complete: getProgress()

  //we add a timeout so it doesn't run everytime it completes, only when we want to update the progress bar.
  ,timeout: 10000 //this is 10 seconds
});

这种方法通常被称为“民意调查”。

jQuery AJAX循环刷新jQueryUI ProgressBar

2 个答案: