I have an ajax call that will take long to complete (minutes). During the execution a spinner will be displayed (triggered with AjaxStart and AjaxStop).
What I'd like to do is to add a counter of the progress in the ajax call (something like "X records out of 1000 processed so far" with X updating with a second ajax call). The second ajax call will run with a setInterval every 10 seconds. My question is: how to stop setInterval when the first ajax call has completed? This is the first ajax call:
function ajax_submit(){
var submit_val=$("#stato").serialize();
dest="plan/new_bp1.php";
$.ajax({
type: "POST",
url: dest,
data: submit_val,
success: function(data){
data1=data.split("|");
if(data1[0]=="Successo"){
$("#spnmsg").fadeTo(200,0.1,
function(){$(this).removeClass().addClass("spn_success").html(data1[1]).fadeTo(900,1)});
}else if(data1[0]=="Errore"){
$("#spnmsg").fadeTo(200,0.1,
function(){$(this).removeClass().addClass("spn_error").html(data1[1]).fadeTo(900,1)});
}
},
complete: function(){
setTimeout(function(){ $('.container').load('plan/home.php');},2000);
}
});
setTimeout(function(){counterUpdater();},2000);
}
In the end I just call counterUpdater() (waiting a couple of seconds while the counter of all the records to be processed gets updated).
function counterUpdater(){
setInterval(ajax_counter_upload(),10000);
}
function ajax_counter_upload(){
//all the stuffs to get the updated count of processed records
}
How can I stop counter_updater() from running each ten seconds when ajax_submit has comlpleted? What do I have to put in success or complete function?
EDIT: I am aware of how to call clearInterval but in this specific case the intervalID will be in the counterUpdater scope only. So how to move it back to ajax_submit?
