我有一个大约有2000条记录的JSON数组,我需要构建一个表来显示这些记录中的数据。由于它有大量数据,处理可能会导致浏览器冻结。所以我被要求显示一个进度条来指示进度。Javascript是单线程的,我必须使用Setinterval来显示进度。但是,根据数组中记录的数量,IE版本中的进度没有正确显示。请帮助
var g_arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
$("#btn").click(function() {
var Loop = 1000;
$("#tbl tbody td").remove();
$("#divProgress").progressbar({
value: 0
});
//window.setTimeout(function(){
for (var i = 0; i < Loop; i++) {
var TR = $("<tr>");
$.each(g_arr, function(index, val) {
var TD = $("<td>");
TD.append(val);
TR.append(TD);
});
window.setTimeout(function() {
$("#divProgress").progressbar({
value: (i / Loop) * 100
});
}, 3000);
$("#tbl tbody").append(TR);
}
//},0);
});
td,
th,
table {
border-color: black;
border-width: thin;
border-style: solid;
border-collapse: collapse;
}
<link href="http://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<div id="divProgress"></div>
<div id="divBody">
<input type="button" id="btn" value="Click Here" />
<table id="tbl">
<thead>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
<th>
Column5
</th>
<th>
Column6
</th>
<th>
Column7
</th>
<th>
Column8
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
在此处输入代码
你做错了几件事:
- 在进行DOM操作时避免长的
for
循环,这是非常昂贵的。请改用requestAnimationFrame。请求动画帧基本上指示浏览器要执行动画(或某种计算),并请求浏览器调用在下一次重新绘制之前指定的函数。换句话说,它就像for
循环,但每次循环迭代仅在浏览器决定(何时可以绘画) - 您正在创建1000个不必要的
$("#divProgress")
对象。使用缓存。创建单个CCD_ 4,然后使用1000次。$("#tbl tbody")
被创建了1000次,也存在同样的问题 - 您正在创建1000进度条插件实例。你现在的做法:
$progressBar.progressbar({ value: (i / Loop) * 100})
是构造函数,用于创建具有该值的新进度条实例。使用setter,而不是构造函数:$progressBar.progressbar("value", (i / Loop) * 100)
var g_arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
$("#btn").click(function() {
var i = 0,
Loop = 1000,
$progressBar = $("#divProgress"),
$body = $("#tbl tbody"),
requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame,
doRequestFrame = function () {
if (i++ < Loop) {
$progressBar.progressbar("value", (i / Loop) * 100);
var $newRow = $("<tr>");
$.each(g_arr, function(index, val) {
$newRow.append($("<td>").append(val));
});
$body.append($newRow);
if (requestAnimationFrame) {
// hey browser, please call again doRequestFrame() when you are idle (before repaint)
requestAnimationFrame(doRequestFrame);
} else {
setTimeout(doRequestFrame, 1);
}
}
};
$("#tbl tbody td").remove();
$progressBar.progressbar({
value: 0
});
// hey browser, please call doRequestFrame() when you are idle (before repaint)
requestAnimationFrame ? requestAnimationFrame(doRequestFrame) : doRequestFrame();
});
td,
th,
table {
border-color: black;
border-width: thin;
border-style: solid;
border-collapse: collapse;
}
<link href="http://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<div id="divProgress"></div>
<div id="divBody">
<input type="button" id="btn" value="Click Here" />
<table id="tbl">
<thead>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
<th>
Column5
</th>
<th>
Column6
</th>
<th>
Column7
</th>
<th>
Column8
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
支持旧版IE
如果没有定义requestAnimationFrame
(就像IE9及以下版本一样),我将手动调用doRequestFrame
。