呵呵,以后有大批数据要需要展示的时候,按照下面的方法整就行
客户体验很不错呀!!!
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>大数组的分时优化处理</title>
<style type="text/css">
th { text-align: left; }
</style>
</head>
<body>
<button onclick="reset()" id="resetBtn" autocomplete="off">重置</button>
<button onclick="test1()" id="test1Btn" autocomplete="off">传统方式加载</button>
<button onclick="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;
});
}
// 通用分时处理函数
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) {
setTimeout(arguments.callee, delay);
} else if(callback) {
callback(items);
}
}, delay);
}
</script>
</body>
</html>
分享到:
相关推荐
NULL 博文链接:https://fp-moon.iteye.com/blog/841040
大数处理包括大数的加法、减法、乘法、除法、阶乘等,包含详细代码(包含模板),解说等。
大数16进制转换为10进制,转换的基本原理是将大数切割开成各个数,按照正常的运算过程,记录进位等
帮助初学者处理acm中的常见大数问题! 其中一些模板值得参考!!!
php /** * 解决 php 5.2.6 以上版本 array_diff() 函数在处理 * 大数组时的需要花费超长时间的问题 * * 整理:http://www.CodeBit.cn * 来源:http://bugs.php.net/47643 */ function array_diff_fast($data1, $data...
大数计算器大数计算器大数计算器大数计算器
能够进行大数处理,将大数转换成数组输入输出,从而实现大数的除法运算
大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律大数定律...
计算 大数加大数 大数减大数 大数乘大数 大数乘小数 小数阶乘 数组处理
大数 进制 转换 支持 多种进制 2 进制 8进制10进制 16 进制
JavaScript应用实例-大数组包含小数组.js
ACM大数模版ACM大数模版ACM大数模版ACM大数模版ACM大数模版ACM大数模版ACM大数模版ACM大数模版
主要介绍了C++解决大数组栈内存不够问题的方法,结合实例形式对比分析了C++针对大数组栈内存不足情况的常见解决方法及其优缺点,具有一定参考借鉴价值,需要的朋友可以参考下
将一个文件比如Bin文件以压缩的方式转成数组,这样就可以在程序需要的地放释放出来生成一个exe文件
大数相乘大数相加大数阶乘代码 完全解决代码简易 容易理解 有什么缺点欢迎评论 交流
JavaCard 平台大数数制转换的设计与实现,谷思庭,邓中亮,根据JavaCard 平台应用开发的需求,本文提出了在此有限资源平台上实现十六进制大数转换成ASCII 码数组的设想,并对其可行性加以论证。
分享一下用C/C++实现的大数相加和大数相乘,可以拿来当工具用。
用C++写的重载的大数模板 大数加法、大数乘法、大数除法、大数减法 带有注释
这个计算器是计算C(n,r)值的。 它能够快速计算出很大很大的n和很大的r的值。 比如 C(1000000,100)的值多少? 下面看看结果: The Value R =: ...106,621,924,285,106,201,287,451,825,038,562,207,162,667,291,115,...
AutoJs源码-大数组包含小数组。本资源购买前提醒:本源码都是实际autojs项目模板,安装好autojs直接运行即可打开。1、支持低版本autojs。2、资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己...