title: jquery progress bar setTimeout
body: <p>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?</p>
  
  <pre><code>var $reportContent = $("#reportDataDiasplay");
  var timeOut;
  $(document).ajaxStart(function(){   
      if($(".ui-dialog").length==0){
      $reportContent.append("&lt;div id='progressBarDialog'&gt;&lt;div id='progressbar'&gt;&lt;/div&gt;&lt;/div&gt;");
      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 &lt; 75 ) { 
                  $progressbar.progressbar( "value", val + Math.random() * 25  ); 
                   }  
              if(val &lt; 99){
                  timeOut = setTimeout( progress, 300 );
              }
           }       
        timeOut = setTimeout( progress, 300 );
      $("#progressBarDialog").dialog("open");         
  });
  $(document).ajaxStop(function(){        
      $("#progressBarDialog").dialog('close');
  });
  </code></pre>