데이터 테이블에 진행률 표시줄을 만드는 방법은 무엇입니까?

Question

저는 현재 대용량(5000)의 데이터가 포함된 데이터 테이블을 작업하고 있습니다. 진행 중인 데이터를 로드할 수 있도록 시간 단위당 얼마나 많은 데이터가 로드되었는지 표시하는 진행률 표시줄을 추가했습니다. 그러나 아래 코드는 더 이상 작동하지 않습니다.

let handlerProgressBar = (id, value, total) => {
    퍼센트 = Math.round((value / total) * 10000) / 100;
    $(id + " > div").html(percent + "%");
    $(id + " > div").css('너비', 퍼센트 + "%");
}

let table = $('#data').DataTable();

가져오기('https://jsonplaceholder.typicode.com/photos')
.then((res) => res.json())
.then((res) => {
  res.forEach(async(data, index)=>{
    테이블.행.추가([
      데이터.id,
      데이터.앨범 ID,
      데이터.제목,
      데이터.url
    ]);
    handlerProgressBar('#progress-bar', index+1, res.length);
    새로운 약속을 기다리세요(r => setTimeout(r, 1)); // 1ms 동안 잠자기
  });
  table.draw();
});

.progress-bar-striped {
    오버플로: 숨김;
    높이: 20px;
    여백 하단: 20px;
    배경색: #f5f5f5;
    테두리 반경: 4px;
    -webkit-box-shadow: 삽입 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 삽입 0 1px 2px rgba(0, 0, 0, 0.1);
    상자 그림자: 삽입 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar-striped>div {
    배경 이미지: 선형 그라데이션(45deg, rgba(255, 255, 255, 0.15) 25%, 투명 25%, 투명 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, 투명 75%, 투명);
    배경 크기: 40px 40px;
    왼쪽으로 뜨다;
    너비: 0%;
    높이: 100%;
    글꼴 크기: 12px;
    줄 높이: 20px;
    색상: #000000;
    글꼴 두께: 굵게;
    텍스트 정렬: 중앙;
    -webkit-box-shadow: 삽입 0 -1px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 삽입 0 -1px 0 rgba(0, 0, 0, 0.15);
    상자 그림자: 삽입 0 -1px 0 rgba(0, 0, 0, 0.15);
    /*-webkit-transition: 너비 3s 용이성;
    -moz-transition: 너비 3s 용이성;
    -o-전환: 너비 3s 용이성;
    전환: 너비 3초 용이성;*/
    애니메이션: 진행률 표시줄-스트라이프 2s 선형 무한;
    배경색: #288ade;
}

.progress-bar-striped p {
    여백: 0;
}

@keyframes 진행률 표시줄-스트라이프 {
    0% {
        배경 위치: 40px 0;
    }
    100% {
        배경 위치: 0 0;
    }
}

<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel=" 스타일시트"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<div id="progress-bar" class="progress-bar-striped">
    <div style="너비: 0%;">
        <p>0%</p>
    </div>
</div>

<table id="data" class="테이블 표시 테이블 제거">
    <머리>
        <tr>
            <번째>ID
            <번째> 앨범 ID
            <번째> 제목
            <번째> URL 사진
        </tr>
    </머리>
    <tbody></tbody>
</table>

테이블이 성공적으로 로드되었지만 진행률 표시줄에 0%에서 100%100%가 표시됩니다. 코드>. 아래 코드에 표시된 것처럼 데이터 테이블을 사용하지 않으면 작동할 수 있을지 궁금합니다(그러나 완벽하지는 않습니다).

let handlerProgressBar = (id, value, total) => {
    퍼센트 = Math.round((value / total) * 10000) / 100;
    $(id + " > div").html(percent + "%");
    $(id + " > div").css('너비', 퍼센트 + "%");
}

(비동기() =>{
  n = 5000이라고 하자;
  handlerProgressBar('#progress-bar', 0, n);
  for(let i = 1; i <= n; i++) {
    handlerProgressBar('#progress-bar', i, n);
    새로운 약속을 기다리세요(r => setTimeout(r, 1)); // 1ms 동안 잠자기
  }
})();

.progress-bar-striped {
    오버플로: 숨김;
    높이: 20px;
    여백 하단: 20px;
    배경색: #f5f5f5;
    테두리 반경: 4px;
    -webkit-box-shadow: 삽입 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 삽입 0 1px 2px rgba(0, 0, 0, 0.1);
    상자 그림자: 삽입 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar-striped>div {
    배경 이미지: 선형 그라데이션(45deg, rgba(255, 255, 255, 0.15) 25%, 투명 25%, 투명 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, 투명 75%, 투명);
    배경 크기: 40px 40px;
    왼쪽으로 뜨다;
    너비: 0%;
    높이: 100%;
    글꼴 크기: 12px;
    줄 높이: 20px;
    색상: #000000;
    글꼴 두께: 굵게;
    텍스트 정렬: 중앙;
    -webkit-box-shadow: 삽입 0 -1px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 삽입 0 -1px 0 rgba(0, 0, 0, 0.15);
    상자 그림자: 삽입 0 -1px 0 rgba(0, 0, 0, 0.15);
    /*-webkit-transition: 너비 3s 용이성;
    -moz-transition: 너비 3s 용이성;
    -o-전환: 너비 3s 용이성;
    전환: 너비 3초 용이성;*/
    애니메이션: 진행률 표시줄-스트라이프 2s 선형 무한;
    배경색: #288ade;
}

.progress-bar-striped p {
    여백: 0;
}

@keyframes 진행률 표시줄-스트라이프 {
    0% {
        배경 위치: 40px 0;
    }
    100% {
        배경 위치: 0 0;
    }
}

Answer 1

해결책을 찾았습니다. 실수는 단위 시간당 데이터 테이블에 얼마나 많은 데이터가 표시되는지 결정하기 위해 async 一词放在 res.forEach 中。当我将其放在 fetch.then 之后并使用 for 循环而不是 forEach 时，函数执行的行为发生了变化并且可以成功完成。 loadNumber 변수를 사용할 수 있도록 만들었다는 것입니다.

으아악 으아악 으아악