javascript - 更新多个进度条

Question

我想根据日期之间的时间更新多个状态栏，但只有页面上的最后一个进度栏会更新。我是 javascript/jquery 的新手，所以我可能做错了很多事情。如果您能帮助我解决这个问题，我将不胜感激。

这是我的代码:

<script>
  $(document).ready(function () {
    for(var i = 0, limit = ${tasksLength}; i < limit; i++) {
      var bar = $('#task-progress-' + i);

      var start = moment($('#task-submit-' + i).val(), "DD-MM-YYYY HH:mm").toDate();
      var end = moment($('#task-deadline-' + i).val(), "DD-MM-YYYY HH:mm").toDate();
      var time = end - start;

      var interval = window.setInterval(function () {
        var elapsed = new Date() - start;
        bar.width(((elapsed / time) * 100) + "%");

        if(elapsed >= limit) {
          window.clearInterval(interval);
        }
      }, 250);
    }
  });
</script>

进度条是在 jSTL forEach 循环中创建的:

<c:set var="tasksLength" value="${fn:length(tasks)}" />
<c:forEach items="${tasks}" var="task" varStatus="counter">

  <fmt:formatDate type="both" pattern="dd-MM-yyyy HH:mm" value="${task.submit}" var="strSubmit" />
  <fmt:formatDate type="both" pattern="dd-MM-yyyy HH:mm" value="${task.deadline}" var="strDeadline" />

  <input type="hidden" id="task-submit-${counter.index}" value="${strSubmit}">
  <input type="hidden" id="task-deadline-${counter.index}" value="${strDeadline}">

  ...

  <div class="progress">
    <div id="task-progress-${counter.index}" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                        1d:20h:30m
    </div>
  </div>

  ...
</c:forEach>

Answer 1

您正在 window.setInterval 内的回调函数内部设置 bar.width，但变量 bar 是在回调外部设置的功能。这使得 bar 的范围位于 for 循环内。

您需要了解的是，for 循环在所有三个 bar 上运行，但没有任何 setinterval 回调再运行 250 毫秒。这就是为什么所有 setinterval 回调都会修改 for 循环中设置的 bar 的最后一个值。

请随时询问更多解释。

要解决此问题，您需要将 bar 的范围隔离到 setinterval 的回调函数。我将让您尝试一下:)