<p>저는 현재 대용량(5000)의 데이터가 포함된 데이터 테이블을 작업하고 있습니다. 진행 중인 데이터를 로드할 수 있도록 시간 단위당 얼마나 많은 데이터가 로드되었는지 표시하는 진행률 표시줄을 추가했습니다. 그러나 아래 코드는 더 이상 작동하지 않습니다.</p> <p><br /></p> <pre class="brush:js;toolbar:false;">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(); });</pre> <pre class="brush:css;toolbar:false;">.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; } }</pre> <pre class="brush:html;toolbar:false;"><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></pre> <p><br /></p> <p>테이블이 성공적으로 로드되었지만 진행률 표시줄에 <code>0%</code>에서 <code>100%</로 증가하는 대신 <code>100%</code>가 표시됩니다. 코드>. 아래 코드에 표시된 것처럼 데이터 테이블을 사용하지 않으면 작동할 수 있을지 궁금합니다(<em>그러나 완벽하지는 않습니다</em>).</p> <p><br /></p> <pre class="brush:js;toolbar:false;">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 동안 잠자기 } })();</pre> <pre class="brush:css;toolbar:false;">.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; } }</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</스크립트> <div id="progress-bar" class="progress-bar-striped"> <div style="너비: 0%;"> <p>0%</p> </div>