分批渲染和同時渲染區別的例子效果~~
使用requestAnimationFrame來實現。requestAnimationFrame這個玩意兒呢，就是告訴瀏覽器——你希望執行一個動畫，並且要求瀏覽器在下次重繪之前調用指定的回調函數更新動畫。該方法需要傳入一個回調函數作爲參數，該回調函數會在瀏覽器下一次重繪之前執行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>requestAnimationFrame</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<style>
ul li { float: left; list-style: none; }
</style>
</head>
<body>
<ul id="requestAnimationFrame"></ul>
<script>
let data = localStorage.getItem('data');
let counts = 10000;
if (!data) {
data = [];
for (var i = counts; i > 0; i --) {
data.push({
name: ` ~\b `,
index: i,
})
}
localStorage.setItem("data", JSON.stringify(data));
} else {
data = JSON.parse(data);
}
function indirectRefresh(total, onceCount) {
//total -> 渲染數據總數 onceCount -> 一次渲染條數
let count = 0, //初始渲染次數值
loopCount = total / onceCount //渲染次數
function refreshAnimation() {
var str = '';
for (var i = 0; i< onceCount; i ++) {
str += `<li>${data[onceCount*count + i].name}</li>`;
}
$('#requestAnimationFrame').append(str);
if (count < loopCount) {
count++
requestAnimationFrame(refreshAnimation)
}
}
requestAnimationFrame(refreshAnimation)
}
function directRefresh () {
var str = '';
for (var i = 0; i < data.length; i ++) {
str += `<li>${data[i].name}</li>`;
}
$('#requestAnimationFrame').append(str);
}
indirectRefresh(data.length, 5); // 分批渲染
// directRefresh(); // 同時渲染
</script>
</body>
</html>
最近很懶，分享個老電影看看吧~~ 哈哈哈
《孤兒怨》不恐怖，沒有鬼啊，怪啊 之類的傢伙~