CODEWITHSUNDEEP
javascriptjqueryajax
Jesse
Jesse

Reputation: 535

jquery progress bar setTimeout

I want to add a progress bar when raise ajax request, the progress bar value is changed by setTimeout. but when I keep sending request, the value will change more and more fast.below is my code, is anyone know how to clean timeout in ajaxStop which set at ajaxStart part? how how to clean all timeout?

var $reportContent = $("#reportDataDiasplay");
var timeOut;
$(document).ajaxStart(function(){   
    if($(".ui-dialog").length==0){
    $reportContent.append("<div id='progressBarDialog'><div id='progressbar'></div></div>");
    var $progressbarDialog = $("#progressBarDialog");           
    $progressbarDialog.dialog({
        modal: true,
        width:175,
        height:50,
        closeOnEscape: false,
        autoOpen: false 
    });             
    $(".ui-dialog-titlebar").hide();        
    }       
    var $progressbar = $( "#progressBarDialog #progressbar" );
    $progressbar.progressbar({value:false});    
    $progressbar.progressbar( "value",0 ); 
      function progress() {
          clearTimeout(timeOut);
            var val = $progressbar.progressbar( "value" ) || 0;
            if ( val < 75 ) { 
                $progressbar.progressbar( "value", val + Math.random() * 25  ); 
                 }  
            if(val < 99){
                timeOut = setTimeout( progress, 300 );
            }
         }       
      timeOut = setTimeout( progress, 300 );
    $("#progressBarDialog").dialog("open");         
});
$(document).ajaxStop(function(){        
    $("#progressBarDialog").dialog('close');
});

Upvotes: 0

Views: 2668

Answers (2)

Jesse
Jesse

Reputation: 535

I have found the point, I should put my time out part into the initial part(new dialog judge). because if you raise new timeout in startAjax part, every time you send ajax request there will be a new timeout raised, these loops work together, so the progress bar changes more and more faster. clearTimeout(timeOut);does not work because a new progress function will be raised newly. below is my amended code. may helpful for you~~ BTW, can anybody vote me once time? I want to join in chat part, but it need 20 reputation score~~

$(document).ajaxStart(function(){   
    if($(".ui-dialog").length==0){
    $reportContent.append("<div id='progressBarDialog'><div id='progressbar'></div></div>");
    $( "#progressBarDialog #progressbar" ).progressbar({value:false});      
    var $progressbarDialog = $("#progressBarDialog");           
    $progressbarDialog.dialog({
        modal: true,
        width:175,
        height:50,
        closeOnEscape: false,
        autoOpen: false 
    });             
    $(".ui-dialog-titlebar").hide();    
     function progress() {
            var val = $progressbar.progressbar( "value" ) || 0;
            if ( val < 80 ) { 
                $progressbar.progressbar( "value", val + Math.random() * 15  );
                timeOut = setTimeout( progress, 500 );
                 }  
         }       
      setTimeout( progress, 500 );

    }       
    var $progressbar = $( "#progressBarDialog #progressbar" );      
    $progressbar.progressbar( "value",0 ); 
    $("#progressBarDialog").dialog("open");         
});
$(document).ajaxStop(function(){    
    $( "#progressBarDialog #progressbar" ).progressbar( "value",0 ); 
    $("#progressBarDialog").dialog('close');
});

Upvotes: 0

Dave Haigh
Dave Haigh

Reputation: 4547

if you're asking how to clear a timeout then all you have to do is utilise clearTimeout();

Assign your setTimeout() to a variable (which you already have) e.g. 

timeOut = setTimeout(progress, 300);

Then when you want to clear it use clearTimeout(timeOut);

To know when your timeout is running so that you know whether to set a new one or not you can just assign a value to a variable whenever you use setTimeout(); Set that value to false whenever you clear your timeout or when it ends. Then only start a new setTimeout() if that value is false.

Upvotes: 4

Related Questions