<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Array Processing Test</title>
<style type="text/css">
th { text-align: left; }
</style>
</head>
<body>
<button οnclick="reset()" id="resetBtn" autocomplete="off">重置</button>
<button οnclick="test1()" id="test1Btn" autocomplete="off">传统方式加载</button>
<button οnclick="test2()" id="test2Btn" autocomplete="off">分时优化加载</button>
<div style="border: 1px solid black; width: 500px; margin: 10px 0; color: white">
<div id="time-progress" style="background-color: navy; height: 16px; width: 0"></div>
</div>
<table id="demo">
<col width="200" />
<col width="300" />
<tbody>
<tr>
<th>商品名称</th>
<th>商品描述</th>
</tr>
</tbody>
</table>
<script type="text/javascript">
// 模拟数据
var JSON_DATA = [], i, len;
for (i = 1; i <= 5000; ++i) {
JSON_DATA.push(["商品名称" + i, "商品描述" + i]);
}
// 通用操作
var demo = document.getElementById("demo"),
tbody = demo.tBodies[0],
tr, td, n = 0,
addItem = function (data) {
tr = document.createElement("tr");
td = document.createElement("td");
td.appendChild(document.createTextNode(data[0]));
tr.appendChild(td);
td = document.createElement("td");
td.appendChild(document.createTextNode(data[1]));
tr.appendChild(td);
tbody.appendChild(tr);
if (++n % 10 == 0)
progressing();
},
reset = function () {
resetBtn.disabled = true;
if (window.ActiveXObject) { // ie
var temp = document.createElement("div");
temp.innerHTML = "<table><tbody><tr><th>商品名称</th><th>商品描述</th></tr></tbody></table>";
demo.replaceChild(temp.firstChild.tBodies[0], tbody);
tbody = demo.tBodies[0];
} else {
tbody.innerHTML = "<tr><th>商品名称</th><th>商品描述</th></tr></tbody>";
}
n = 0;
progress.innerHTML = "";
progress.style.width = 0;
test1Btn.disabled = false;
test2Btn.disabled = false;
},
progressing = function () {
progress.style.width = (progress.offsetWidth + 1) + "px";
},
resetBtn = document.getElementById("resetBtn"),
test1Btn = document.getElementById("test1Btn"),
test2Btn = document.getElementById("test2Btn"),
progress = document.getElementById("time-progress");
// 传统加载
function test1() {
resetBtn.disabled = true;
test1Btn.disabled = true;
test2Btn.disabled = true;
var start = +new Date(), end;
for (i = 0, len = JSON_DATA.length; i < len; ++i) {
addItem(JSON_DATA[i]);
}
end = +new Date();
progress.innerHTML = end - start;
resetBtn.disabled = false;
}
// 分时加载
function test2() {
resetBtn.disabled = true;
test1Btn.disabled = true;
test2Btn.disabled = true;
var start = +new Date(), end;
timedChunk(JSON_DATA, addItem, null, function () {
resetBtn.disabled = false;
end = +new Date();
progress.innerHTML = end - start;
});
}
// 通用分时处理函数
//items要 处理的数组
//process处理函数,
//暂时无用
//callback处理完成后的回调函数
function timedChunk(items, process, context, callback) {
var todo = items.concat(), delay = 25;
setTimeout(function () {
var start = +new Date();
do {
process.call(context, todo.shift());
} while (todo.length > 0 && (+new Date() - start < 50));
if (todo.length > 0) {
alert(arguments.callee);
setTimeout(arguments.callee, delay);
} else if (callback) {
callback(items);
}
}, delay);
}
</script>
</body>
</html>