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

您正在bar.width内的回调函数内设置window.setInterval，但变量bar设置在回调函数之外。这使得bar的范围在for循环中。

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

请随时询问更多解释。

要解决此问题，您需要将bar的范围隔离到setinterval的回调函数。我会留给你试试:)

更新多个进度条

1 个答案: