多个ajax请求和进度条
在下面的代码中，我创建了一个进度条，并在处理 ajax 请求时显示其进度。
我只是通过在 cnt 计数器变量中添加 5 来伪造此处显示的进度，然后我做了一个 检查计数器何时达到 90。此时，如果请求未成功执行，那么我将暂停/禁用进度栏，每当响应到来时，我将以 100 完成整个进度栏。
现在的问题是我想添加多个进度酒吧，因为我正在触发多个 ajax 请求。因此，以下是仅针对一个请求和一个进度条实现的代码，但我希望它用于多个请求。由于这里使用全局变量来检查响应和计时器 ID，所以我不知道我可以如何处理多个请求
var cnt=0;
var res=null;
function getProgress(data){
res=data;
}
var i =0;
$('#start').click(function(){
i = setInterval(function() {
if(res!=null)
{
clearInterval(i);
$("#pb1").progressbar( "option", "value", cnt=cnt+100 );
}
var value = $("#pb1").progressbar("option", "value");
if(value >=90 && res==null){
$("#pb1").progressbar("option", "disable");
}
else{
$("#pb1").progressbar( "option", "value", cnt=cnt+5 );
}
},2500);
$.ajax({
url: 'http://localhost/beta/demo.php',
success: getProgress
});
});
$("#pb1").progressbar({
value: 0 ,
change: function(event, ui) {
if(res!=null)
clearInterval(i);
}
});
In a following piece of code i am create a progress bar and showing its progress as the ajax request get processed.
i am faking the progress shown here just by adding 5 in to cnt counter variable after that i made a
check when counter reach to 90. at this point if the request is not executed successfully then i will pause/disable the progress bar and whenever response come i will complete the whole progress bar with 100.
now the problem is i want to add multiple progress bar as i am firing multiple ajax request. so following is the code to implement only for one request and one progress bar but i want it for more than one. as global variables are used over here for checking response and timer id so i don't know how well i can handle it for multiple request
var cnt=0;
var res=null;
function getProgress(data){
res=data;
}
var i =0;
$('#start').click(function(){
i = setInterval(function() {
if(res!=null)
{
clearInterval(i);
$("#pb1").progressbar( "option", "value", cnt=cnt+100 );
}
var value = $("#pb1").progressbar("option", "value");
if(value >=90 && res==null){
$("#pb1").progressbar("option", "disable");
}
else{
$("#pb1").progressbar( "option", "value", cnt=cnt+5 );
}
},2500);
$.ajax({
url: 'http://localhost/beta/demo.php',
success: getProgress
});
});
$("#pb1").progressbar({
value: 0 ,
change: function(event, ui) {
if(res!=null)
clearInterval(i);
}
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
使用对象而不是变量怎么样？您创建一个包含所有变量的对象，然后创建与进度条一样多的副本。
更多信息请参见：http://www.javascriptkit.com/javatutors/oopjs.shtml
How about using Objects instead of variables? You create an object with all the variables in it and then just create as many copies as progress bars you have.
More info here: http://www.javascriptkit.com/javatutors/oopjs.shtml