jQuery AJAX循环刷新jQueryUI ProgressBar

我有一个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)冻结了Javascript，并且对话框没有关闭（我假设，因为它将等到查询完成）。

这一个， 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方法意味着您不必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调用中添加’complete’参数来实现

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

这是一种通常称为“轮询”的方法。