<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="
https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
</body>
<script src="./js/test.json"></script>
<script>
loadAll(data);
function loadAll(response) {
// 将 18 万条数据分组， 每组 500 条，一共 360 组
let groups = group(response);
for(let i = 0; i < groups.length; i++) {
//闭包， 保持 i 值的正确性
window.setTimeout(function() {
let group = groups[i];
let index = i + 1;
return function() {
//分批渲染
loadPart(group, index);
}
}(), 1);
}
}
// 数据分组函数（每组 500 条）
function group(data) {
let result = [];
let groupItem;
for(let i = 0; i < data.length; i++) {
if(i % 500 == 0) {
groupItem != null && result.push(groupItem);
groupItem = [];
}
groupItem.push(data[i]);
}
result.push(groupItem);
return result;
}
let currIndex = 0;
// 加载某一批数据的函数
function loadPart(group, index) {
let html = "";
for(let i = 0; i < group.length; i++) {
let item = group[i];
html += "<li>姓名:" +
item.name + "手机号:" + item.phone + "电子邮箱:" + item.email + "</li>";
}
// 保证顺序不错乱
while(index - currIndex == 1) {
$("#content").append(html);
currIndex = index;
}
}
</script>
</html>
1
Select Language