Question

我想在提出ajax请求时添加进度条，进度条值由setTimeout更改。但是当我不断发送请求时，值会变得越来越快。下面是我的代码，是否有人知道如何清除ajaxSttop中设置为ajaxStart部分的超时？如何清除所有超时？

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');
});

Answer 1

如果你问如何清除超时，那么你所要做的就是利用clearTimeout();

将setTimeout()分配给变量（您已经拥有），例如

timeOut = setTimeout(progress, 300);

然后，当您要清除它时，请使用clearTimeout(timeOut);

要知道超时何时运行，以便知道是否设置新超时，只要使用setTimeout（），就可以为变量赋值。每当您清除超时或结束时，将该值设置为false。然后，如果该值为false，则仅启动新的setTimeout（）。

Answer 2

我已经找到了重点，我应该把时间分成初始部分（新对话判断）。因为如果你在startAjax部分中引发新的超时，每次发送ajax请求都会引发新的超时，这些循环一起工作，因此进度条的变化越来越快。 clearTimeout(timeOut);不起作用，因为将新引发新的进度函数。以下是我的修改后的代码。可能对你有帮助~~ BTW ，有人可以一次投票给我吗？我想加入聊天部分，但需要20点声望得分~~

$(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');
});

jquery进度条setTimeout

2 个答案: