jQuery AJAX循环刷新jQueryUI ProgressBar [英] jQuery AJAX loop to refresh jQueryUI ProgressBar

问题描述

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

I've got a jQueryUI progressbar that should show the percentage of a query done. Oracle has a nice system table that lets you see operations that will take more than 10 seconds. I'm trying to make staggered $.ajax calls to this query in order to refresh the progress bar.

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

Problem is, I can either get the loops to make rapid-fire requests without any wait time, or just delay the entire JavaScript from executing.

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

I start the first request by clicking my "Execute" button in a jQueryUI dialog.

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

我正在尝试构建StartLoop()函数或进行递归GetProgress()函数.理想情况下，我将使用一个公共变量var isDone = false作为我何时结束循环或停止递归调用该函数的指示器.

I'm trying to build either the StartLoop() function or make a recursive GetProgress() function. Ideally, I will have a public variable var isDone = false to act as my indicator for when to terminate the loop or stop recursively calling the function.

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

For simplicity I have just made a static loop that executes 100 times:

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

这是我的示例ajax请求:

And here's my sample ajax request:

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;                
        }
    });
}

到目前为止，我发现的是:

So what I've found is, so far:

setTimeout(GetProgress(), 3000)冻结Javascript，并且对话框不会关闭(我想是因为这将等待查询完成).

setTimeout(GetProgress(), 3000) in StartLoop() freezes Javascript, and the dialog does not close (I assume, because it will wait until the query is done).

这个，pausecomp(3000)的作用大致相同.

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

If I call either of these in the "success" function of my AJAX request, it gets ignored (probably because it's starting another call asynchronously).

我有点卡在这里，谢谢您的任何帮助.

I'm kinda stuck here, any help would be appreciated, thanks.

推荐答案

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

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

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

Otherwise, all 100 will fire off after 3 seconds. Instead, you want 0, 3000, 6000, 9000, etc., i.e. 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方法意味着您不必预先知道需要多少轮询循环.它将继续直到完成.

clearInterval will stop it from calling GetProgress() again. Using the setInterval method means you don't have to know how many poll loops you need up front. It will simply continue until you are done.

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

Or better yet, you can call GetProgress() from the ajax callback, with the advantage that it will only poll again once you have a response from your query:

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()一次即可启动循环.

Then just call GetProgress() once to initiate the loop.

这篇关于jQuery AJAX循环刷新jQueryUI ProgressBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！