다중 진행 막대 업데이트

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 루프에서 만들어집니다 : 여기

내 코드의 당신은 window.setInterval 내에서 콜백 함수 내부에서 bar.width을 설정하는

<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가 설정됩니다 콜백 함수 외부. for 루프 내에서 bar의 범위를 만듭니다.

여러분이 알아야 할 것은 bar 세 가지 모두에 대해 for-loop가 실행되지 않지만 다른 250ms 동안 실행되는 setinterval 콜백이 없습니다. 그래서 모든 setinterval 콜백이 for 루프에 설정된 bar의 마지막 값을 수정하는 이유입니다.

자세한 내용은 언제든지 문의하십시오.

이 문제를 해결하려면 bar의 범위를 setinterval의 콜백 기능으로 분리해야합니다. 시도해보기 위해 최선을 다할 것입니다.