当面临某些不需要考虑执行顺序、同步的且耗时较长的任务,可以考虑分块思路
js 代码
const ul = document.getElementById("ul")
//创建测试数组
function cerateArr(size) {
let arr = []
for (let i = size; i > 0; i--) {
arr.push(i)
}
return arr
}
// 渲染函数
function render(arr) {
for (let i = 0; i < arr.length; i++) {
let li = document.createElement('li')
li.innerHTML = `这是第${arr[i]}个`
ul.appendChild(li)
}
}
// 分块处理函数 案例只考虑整数数据
function chunk(array, process, context) {
let item = array.slice(0,10)
process.call(context, item)
if(array.length > 0) {
setTimeout(() => {
chunk(array.slice(item.length,array.length),process,context)
},100)
}
}
let arr = cerateArr(580)
chunk(arr,render)
// 思路将数组分割再结合定时器去执行任务