如何在AJAX / Javascript中调用长时间运行的进程时更新UI?
发布时间:2020-12-16 02:48:07 所属栏目:百科 来源:网络整理
导读:我有多个需要串行调用的进程(我正在使用同步 AJAX调用).我希望在完成后显示长时间运行的进程的状态,然后继续进行下一个进程.这是我编写的示例代码. var counter = 0;function runProcess(input,output) { doWork(); doWork(); doWork();};function doWork()
我有多个需要串行调用的进程(我正在使用同步
AJAX调用).我希望在完成后显示长时间运行的进程的状态,然后继续进行下一个进程.这是我编写的示例代码.
var counter = 0; function runProcess(input,output) { doWork(); doWork(); doWork(); }; function doWork() { counter++; document.getElementById('<%=this.progressMonitor.ClientID%>').innerHTML += "Running " + counter; // some lengthy calculations for (var i = 0; i < 1000000; i++) { var foo = Math.random(); } setTimeout(updateStatus,1000); }; function updateStatus() { document.getElementById('<%=this.progressMonitor.ClientID%>').innerHTML += "Done " + counter; } 当我运行它时,我得到以下响应: 运行1运行2运行3Done 3Done 3Done 3 我想得到 运行1Done 1运行2Done 2运行3Done 3 如果我在updateStatus函数中插入一个alert()语句,那么我会得到我想要的响应/执行顺序.浏览器是否为3个函数调用创建3个线程并异步执行它们? 我怎么能连续运行这个? setTimeout是否正确实现?感谢您的帮助. 解决方法
听起来你想要排队AJAX调用. jQuery提供了一个很好的队列函数,因此您可以确保一个接一个地调用一系列函数. Mootools和其他框架提供类似的功能.
这是我fiddle的代码,展示了如何做到这一点. var queueElement = $("#output"); var counter = 0; function doWork(next) { queueElement.append("Starting " + counter + "<br/>"); counter++; $.ajax('/echo/json/').always(function() { queueElement.append("Ending " + counter + "<br/>"); next(); }); } queueElement.queue('workQueue',doWork); queueElement.queue('workQueue',doWork); queueElement.dequeue('workQueue'); // start the work queue (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |