完成后

Question

我有工作但丑陋的解决方案。

想法是：

1. 在ajax调用之前运行进度条
2. 完成（或失败）后跳转到进度结束栏
3. 等待90％如果ajax呼叫尚未完成（完成时比跳转到结束）

我的解决方案至少存在三个问题：

1. 我必须在3个地方重置进度条'width'。
2. 我必须有公共变量（widthProgressBar）
3. 如果我想在同一页面上有两个进度条，我无法重复使用'startProgress'函数。

这是我的解决方案：http://jsfiddle.net/WQXXT/5403/

var widthProgressBarPing = 0;
// handles the click event, sends the query
function getSuccessOutput() {
  widthProgressBar = 0;
  startProgress("pingTestBar");
  $.ajax({
    url: '/echo/js/?js=hello%20world!',
    complete: function(response) {
      widthProgressBar = 99;
    },
    error: function() {
      widthProgressBar = 99;
    },
  });
  return false;
}

function startProgress(barId) {
  var elem = document.getElementById(barId);
  var id = setInterval(frame, 15);

  function frame() {
    if (widthProgressBar >= 90 && widthProgressBar < 99) {}
    if (widthProgressBar >= 100) {
      clearInterval(id);
    } else {
      widthProgressBar++;
      elem.style.width = widthProgressBar + '%';
      elem.innerHTML = widthProgressBar * 1 + '%';
    }
  }
}

.testProgress {
  width: 100%;
  background-color: #ddd;
}

.testProgressBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onclick="return getSuccessOutput();"> test success </a> |
<div class="testProgress">
  <div id="pingTestBar" class="testProgressBar"></div>
</div>

Answer 1

此处修改了您的代码。

我通过使用widthProgressBarPing元素的宽度来消除全局变量barId。<{1}}。

＆＃13;

＆＃13;

var widthProgressBar = elem.style.width.slice(0, -4);

＆＃13;

// handles the click event, sends the query
function getSuccessOutput(barId) {
  widthProgressBar = 0;
  startProgress(barId);
  $.ajax({
    url: '/echo/js/?js=hello%20world!',
    complete: function(response) {
      widthProgressBar = 99;
    },
    error: function() {
      widthProgressBar = 99;
    },
  });
  return false;
}

function startProgress(barId) {
  var elem = document.getElementById(barId);
  var widthProgressBar = elem.style.width.slice(0, -4);
  var id = setInterval(frame, 15);

  function frame() {
    if (widthProgressBar >= 90 && widthProgressBar < 99) {}
    if (widthProgressBar >= 100) {
      clearInterval(id);
    } else {
      widthProgressBar++;
      elem.style.width = widthProgressBar + '%';
      elem.innerHTML = widthProgressBar * 1 + '%';
    }
  }
}

＆＃13;

.testProgress {
  width: 100%;
  background-color: #ddd;
}

.testProgressBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

＆＃13;

＆＃13;

＆＃13;

通过将参数传递给<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" onclick="return getSuccessOutput('pingTestBar');"> test success </a> || <div class="testProgress"> <div id="pingTestBar" class="testProgressBar"></div> </div>，您可以对不同的条使用相同的函数。

＆＃13;

＆＃13;

startProgress(barId)

＆＃13;

// handles the click event, sends the query
function getSuccessOutput(barId) {
  widthProgressBar = 0;
  startProgress(barId);
  $.ajax({
    url: '/echo/js/?js=hello%20world!',
    complete: function(response) {
      widthProgressBar = 99;
    },
    error: function() {
      widthProgressBar = 99;
    },
  });
  return false;
}

function startProgress(barId) {
  var elem = document.getElementById(barId);
  var widthProgressBar = elem.style.width.slice(0, -4);
  var id = setInterval(frame, 15);

  function frame() {
    if (widthProgressBar >= 90 && widthProgressBar < 99) {}
    if (widthProgressBar >= 100) {
      clearInterval(id);
    } else {
      widthProgressBar++;
      elem.style.width = widthProgressBar + '%';
      elem.innerHTML = widthProgressBar * 1 + '%';
    }
  }
}

＆＃13;

.testProgress {
  width: 100%;
  background-color: #ddd;
}

.testProgressBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为这是正确的方法，不会在使用范围之外更改不必要的变量。

// handles the click event, sends the query
function getSuccessOutput() {
  var bar = new Bar("pingTestBar");
  $.ajax({
    url: '/echo/js/?js=hello%20world!',
    complete: function(response) {
      bar.finish()
    },
    error: function() {
      bar.finish()
    },
  });
  return false;
}



function Bar(barId) {
  var self = this;
  self.w = 0;
  var elem = document.getElementById(barId);
  var id = setInterval(frame, 15);
  
  this.finish = function(){
    clearInterval(id);
    self.w = 100;
    changeElem()
  }
  
  function changeElem(){
  elem.style.width = self.w + '%';
      elem.innerHTML = self.w * 1 + '%';
  }
  
  function frame() {
    if (self.w >= 90 && self.w < 99) {}
    if (self.w >= 100) {
      
    } else {
      self.w++;
      changeElem()
    }
  }
}

.testProgress {
  width: 100%;
  background-color: #ddd;
}

.testProgressBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onclick="return getSuccessOutput();"> test success </a> |
<div class="testProgress">
  <div id="pingTestBar" class="testProgressBar"></div>
</div>

Answer 3

  

[cut] 我的解决方案至少有三个问题：

     

  
1. 我必须在3个地方重置进度条'width'
  
2. 我必须公开   变量（widthProgressBar）
  
3. 我无法重用函数'startProgress'   我希望在同一页面上有两个进度条。
  

1. 只需在getSuccessOutput()启动
时初始化/重置一次
2. 使用存储在每个栏上的width属性
3. 将“bar”作为参数传递，因此您可以根据需要使用多个条形图。

无论如何，您可以使用.animate()来显示进度，因此您可以避免保留时间间隔ID并且代码更具可读性。

请查看以下代码段：

function getSuccessOutput() {
  //Reset all progress bars
  $(".testProgressBar").width(0);
  $(".testProgressBar").text("");
  
  //Start requests
  doRequest($("#pingTestBar"), 1200);
  doRequest($("#pingTestBar2"), 1500);
  doRequest($("#pingTestBar3"), 800);
}

function startProgress(bar) {
  bar.animate(
    {
      width:'100%'
    },
    {
      step: function() {
              setText(bar);
            },
      duration: 2000
    }
 );
}

function complete(bar) {
  console.log("Complete " + bar.attr('id'));
  bar.finish().animate(
    {
      width:'100%'
    },
    {
      step: function(){
              setText(bar);
            }
    }
 );
}

function setText(bar){
  var text = bar.width() / bar.parent().width() * 100;
  bar.text(text.toFixed(0));
}

function mockAjax(options) {
  var that = {
    done: function done(callback) {
      if (options.success)
        setTimeout(callback, options.timeout, options.response);
      return that;
    },
    error: function error(callback) {
      if (!options.success)
        setTimeout(callback, options.timeout, options.response);
      return that;
    }
  };
  return that;
}

function doRequest(bar, duration){
  var mock = {
    ajax: function() {
      return mockAjax({
        success: true,
        response: {},
        timeout: duration
      });
    }
  };
  
  startProgress(bar);
  
  mock.ajax()
    .done(
          function (response) { 
            complete(bar);
          }
    )
    .error(
          function (response) { 
            complete(bar);
          }
    );
}

.testProgress {
        width: 100%;
        background-color: #ddd;
    }

.testProgressBar {
        width: 0%;
        height: 30px;
        background-color: #4CAF50;
        text-align: center;
        line-height: 30px;
        color: white;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onclick="return getSuccessOutput();"> test success </a> |
<div class="testProgress">
     <div id="pingTestBar" class="testProgressBar"></div>
</div>
<div class="testProgress">
     <div id="pingTestBar2" class="testProgressBar"></div>
</div>
<div class="testProgress">
     <div id="pingTestBar3" class="testProgressBar"></div>
</div>

我希望它可以帮助你，再见。