完成后跳转到进度条末尾答案

【问题标题】：Jump to end of progress bar when complete完成后跳转到进度条末尾
【发布时间】：2017-10-22 23:51:25
【问题描述】：

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

想法是：

ajax 调用前运行进度条
完成（或失败）时跳转到进度条的末尾
如果 ajax 调用还没有完成，则等待 90%（完成而不是跳转到结尾）

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

我必须在 3 个位置重置进度条“宽度”。
我必须有公共变量 (widthProgressBar)
如果我想在同一页面上有两个进度条，我无法重用函数“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>

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

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

// 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>

【讨论】：

【解决方案2】：

这里是你的代码修改。

我通过使用始终存在的barId 元素的宽度(var widthProgressBar = elem.style.width.slice(0, -4);) 消除了全局变量widthProgressBarPing。

// 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 + '%';
    }
  }
}

.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('pingTestBar');"> test success </a> ||
<div class="testProgress">
  <div id="pingTestBar" class="testProgressBar"></div>
</div>

通过将参数传递给startProgress(barId)，您可以对不同的柱使用相同的函数。

// 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 + '%';
    }
  }
}

.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('pingTestBar');"> test success </a> ||
<a href="#" onclick="return getSuccessOutput('pingTestBar2');"> test success2 </a>
<div class="testProgress">
  <div id="pingTestBar" class="testProgressBar"></div>
</div>

<div class="testProgress">
  <div id="pingTestBar2" class="testProgressBar"></div>
</div>

【讨论】：

【解决方案3】：

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

我必须在 3 个位置重置进度条“宽度”

我必须公开变量（宽度进度条）

我无法在如果我想在同一页面上有两个进度条。

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

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

请看下面的sn-p：

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>

希望对你有帮助，再见。

【讨论】：