Multiple ajax request and progress bar

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 w开发者_Python百科ill 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);

}
});

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