如何在Ajax请求中以100％停止进度条？

Question

我要在执行ajax请求时使用引导程序制作progress bar 。 我可以启动进度条，但是问题是我不知道让ajax call success时将其停止在100％的方法。 以下是我编写的代码：

HTML

<div class="progress">
  <div class="progress-bar" role="progressbar"></div>
</div>

jQuery的

$(document).ready(function(){
    let percentValue = 0,
    progressBar = $('.progress-bar');
    timer = setInterval(startBar, 500);

    $.ajax({
      url: url,
      type: "GET",
      dataType: "json",
      beforeSend: function(){
        startBar();
      },
      success: function(){
        clearInterval(timer);
      }
      }).done(function(data){
        alert("success");
        console.log(data);
      }).fail(function(jqxhr, textStatus, error ){
        var err = textStatus + ", " + error;
        console.log( "Request Failed: " + err );
    });

    function startBar(){
      percentValue += 25;
      progressBar.css("width", percentValue + "%").html(percentValue + "%");
    }
}); 

我收到的结果大部分将在75％处停止。 我没有上传任何照片。 它只是从服务器获取数据。 如何使其停止在100％？

Answer 1

成功时必须调用startBar()函数：

$(document).ready(function(){
    let percentValue = 0,
    progressBar = $('.progress-bar');
    timer = setInterval(startBar, 500);

    $.ajax({
      url: url,
      type: "GET",
      dataType: "json",
      beforeSend: function(){
        startBar();
      },
      success: function(){
        clearInterval(timer);
      }
      }).done(function(data){
        alert("success");
        startBar();
        console.log(data);
      }).fail(function(jqxhr, textStatus, error ){
        var err = textStatus + ", " + error;
        console.log( "Request Failed: " + err );
    });

    function startBar(){
      percentValue += 25;
      progressBar.css("width", percentValue + "%").html(percentValue + "%");
    }
}); 

Answer 2

 $(document).ready(function() { let percentValue = 0, progressBar = $('.progress-bar'); timer = setInterval(startBar, 500); $.ajax({ url: "http://www.mocky.io/v2/5c3f66243500002d2cec3954", type: "GET", dataType: "json", beforeSend: function() { startBar(); }, success: function() { clearInterval(timer); } }).done(function(data) { alert("success"); console.log(data); }).fail(function(jqxhr, textStatus, error) { var err = textStatus + ", " + error; console.log("Request Failed: " + err); }); function startBar() { if (percentValue < 100) { percentValue += 25; } progressBar.css("width", percentValue + "%").html(percentValue + "%"); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="progress"> <div class="progress-bar" role="progressbar"></div> </div> 

Answer 3

• 时间间隔将开始加载进度条，因此您无需在发送前调用它
• 成功时，如果百分比值小于100，则将其设置为75，以便在下一个间隔更新并结束
• startBar方法检查百分比是否小于100。如果是，它将更新并继续。 否则，如果达到100，它将终止间隔

 $(document).ready(function(){ let percentValue = 0, progressBar = $('.progress-bar'); timer = setInterval(startBar, 500); $.ajax({ url: url, type: "GET", dataType: "json", success: function(){ if (percentValue < 100) percentValue = 75; } }).done(function(data){ alert("success"); console.log(data); }).fail(function(jqxhr, textStatus, error ){ var err = textStatus + ", " + error; console.log( "Request Failed: " + err ); }); function startBar(){ if (percentValue < 100) { percentValue += 25; progressBar.css("width", percentValue + "%").html(percentValue + "%"); } else { clearInterval(timer); } } });