<p>我目前正在处理包含大量数据（5000）的数据表。为了能够按进度加载数据，我添加了一个进度条，用于说明每个时间单位已加载的数据量。但下面的代码不再起作用。</p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">let handleProgressBar = (id, value, total) => {
let percent = Math.round((value / total) * 10000) / 100;
$(id + " > div").html(percent + "%");
$(id + " > div").css('width', percent + "%");
}
let table = $('#data').DataTable();
fetch('https://jsonplaceholder.typicode.com/photos')
.then((res) => res.json())
.then((res) => {
res.forEach(async(data, index)=>{
table.row.add([
data.id,
data.albumId,
data.title,
data.url
]);
handleProgressBar('#progress-bar', index+1, res.length);
await new Promise(r => setTimeout(r, 1)); // sleep 1 ms
});
table.draw();
});</pre>
<pre class="brush:css;toolbar:false;">.progress-bar-striped {
overflow: hidden;
height: 20px;
margin-bottom: 20px;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar-striped>div {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
float: left;
width: 0%;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #000000;
font-weight: bold;
text-align: center;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
/*-webkit-transition: width 3s ease;
-moz-transition: width 3s ease;
-o-transition: width 3s ease;
transition: width 3s ease;*/
animation: progress-bar-stripes 2s linear infinite;
background-color: #288ade;
}
.progress-bar-striped p {
margin: 0;
}
@keyframes progress-bar-stripes {
0% {
background-position: 40px 0;
}
100% {
background-position: 0 0;
}
}</pre>
<pre class="brush:html;toolbar:false;"><link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet"/>
<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="width: 0%;">
<p>0%</p>
</div>
</div>
<table id="data" class="table display table-stripped">
<thead>
<tr>
<th>ID</th>
<th>Album ID</th>
<th>Title</th>
<th>URL Photo</th>
</tr>
</thead>
<tbody></tbody>
</table></pre>
<p><br /></p>
<p>表已成功加载，但进度条显示 <code>100%</code>，而不是应从 <code>0%</code> 递增到 <code>100%</code>。我想知道如果我不使用数据表，它是否有效（<em>但不完美</em>），如下面的代码所示。</p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">let handleProgressBar = (id, value, total) => {
let percent = Math.round((value / total) * 10000) / 100;
$(id + " > div").html(percent + "%");
$(id + " > div").css('width', percent + "%");
}
(async() =>{
let n = 5000;
handleProgressBar('#progress-bar', 0, n);
for(let i = 1; i <= n; i++) {
handleProgressBar('#progress-bar', i, n);
await new Promise(r => setTimeout(r, 1)); // sleep 1 ms
}
})();</pre>
<pre class="brush:css;toolbar:false;">.progress-bar-striped {
overflow: hidden;
height: 20px;
margin-bottom: 20px;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar-striped>div {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
float: left;
width: 0%;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #000000;
font-weight: bold;
text-align: center;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
/*-webkit-transition: width 3s ease;
-moz-transition: width 3s ease;
-o-transition: width 3s ease;
transition: width 3s ease;*/
animation: progress-bar-stripes 2s linear infinite;
background-color: #288ade;
}
.progress-bar-striped p {
margin: 0;
}
@keyframes progress-bar-stripes {
0% {
background-position: 40px 0;
}
100% {
background-position: 0 0;
}
}</pre>
<pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progress-bar" class="progress-bar-striped">
<div style="width: 0%;">
<p>0%</p>
</div>
</div></pre>
<p><br /></p>
<p>我不知道错误出在哪里。谁能为我提供处理大量数据的数据表进度条的完美方法？先谢谢了。</p>
1
1154
收藏
我已经找到解决办法了。错误是我将
async一词放在res.forEach中。当我将其放在fetch.then之后并使用for循环而不是forEach时，函数执行的行为发生了变化并且可以成功完成。loadNumber变量可用于确定每单位时间将在数据表中绘制多少数据。let handleProgressBar = (id, value, total) => { let percent = Math.round((value / total) * 10000) / 100; $(id + " > div").html(percent + "%"); $(id + " > div").css('width', percent + "%"); } let table = $('#data').DataTable({ dom: 'ilpftr' }); fetch('https://jsonplaceholder.typicode.com/photos') .then((res) => res.json()) .then(async(res) => { let loadNumber = 50; for(let i = 0; i < res.length; i++) { table.row.add([ res[i].id, res[i].albumId, res[i].title, res[i].url ]); if (i % loadNumber == 0) { table.draw(); handleProgressBar('#progress-bar', i+1, res.length); await new Promise(r => setTimeout(r, 1)); // sleep 1 ms } } table.draw(); handleProgressBar('#progress-bar', res.length, res.length); });.progress-bar-striped { overflow: hidden; height: 20px; margin-bottom: 20px; background-color: #f5f5f5; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .progress-bar-striped>div { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; float: left; width: 0%; height: 100%; font-size: 12px; line-height: 20px; color: #000000; font-weight: bold; text-align: center; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); /*-webkit-transition: width 3s ease; -moz-transition: width 3s ease; -o-transition: width 3s ease; transition: width 3s ease;*/ animation: progress-bar-stripes 2s linear infinite; background-color: #288ade; } .progress-bar-striped p { margin: 0; } @keyframes progress-bar-stripes { 0% { background-position: 40px 0; } 100% { background-position: 0 0; } }<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet"/> <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="width: 0%;"> <p>0%</p> </div> </div> <table id="data" class="table display table-stripped"> <thead> <tr> <th>ID</th> <th>Album ID</th> <th>Title</th> <th>URL Photo</th> </tr> </thead> <tbody></tbody> </table>