Question

我想在执行progress bar请求时使用引导程序创建ajax。我可以启动进度栏，但是问题是，我不知道有一种方法可以使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

间隔将开始加载进度条，因此您无需在beforeSend上调用它
成功后，如果百分比值小于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);
      }
    }
});

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

3 个答案: