<p>我目前正在处理包含大量数据(5000)的数据表。为了能够按进度加载数据,我添加了一个进度条,用于说明每个时间单位已加载的数据量。但下面的代码不再起作用。</p>
<p><br />></p>
<pre class="brush:js;toolbar:false;">让handleProgressBar = (id, value, Total) => {
让百分比 = Math.round((值 / 总计) * 10000) / 100;
$(id + " > div").html(percent + "%");
$(id + " > div").css('宽度', 百分比 + "%");
}
让表 = $('#data').DataTable();
fetch('https://jsonplaceholder.typicode.com/photos')
.then((res) => res.json())
.then((res) => {
res.forEach(async(数据,索引)=>{
表.行.添加([
数据.id,
数据.albumId,
数据.标题,
数据地址
]);
handleProgressBar('#progress-bar', index+1, res.length);
等待新的 Promise(r => setTimeout(r, 1)); // 休眠1毫秒
});
表格.draw();
});</pre>
.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-transition:宽度 3s 缓动;
过渡:宽度 3s 缓动;*/
动画:progress-bar-stripes 2s 线性无限;
背景颜色:#288ade;
}
.进度条条纹 p {
保证金:0;
}
@keyframes 进度条条纹 {
0% {
背景位置:40px 0;
}
100% {
背景位置:0 0;
}
}</前>
<link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="样式表”/>
<脚本 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<脚本 src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
;
<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;">让handleProgressBar = (id, value, Total) => {
让百分比 = Math.round((值 / 总计) * 10000) / 100;
$(id + " > div").html(percent + "%");
$(id + " > div").css('宽度', 百分比 + "%");
}
(异步()=>{
令 n = 5000;
handleProgressBar('#progress-bar', 0, n);
for(令 i = 1; i <= n; i++) {
handleProgressBar('#progress-bar', i, n);
等待新的 Promise(r => setTimeout(r, 1)); // 休眠1毫秒
}
})();</pre>
.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-transition:宽度 3s 缓动;
过渡:宽度 3s 缓动;*/
动画:progress-bar-stripes 2s 线性无限;
背景颜色:#288ade;
}
.进度条条纹 p {
保证金:0;
}
@keyframes 进度条条纹 {
0% {
背景位置:40px 0;
}
100% {
背景位置:0 0;
}
}</pre>
<脚本 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</脚本>
;
<p>0%</p>
</div></pre>
<p><br />></p>
<p>我不知道错误出在哪里。谁崩溃了我提供处理大量数据的数据表进度条的完美方法?先谢谢了。</p>
我已经找到解决办法了。错误是我将
async
一词放在res.forEach
中。当我将其放在fetch.then
之后并使用for
循环而不是forEach
时,函数执行的行为发生了变化并且可以成功完成。loadNumber
变量可用于确定每单位时间将在数据表中绘制多少数据。