数组分块思路 记一笔

当面临某些不需要考虑执行顺序、同步的且耗时较长的任务，可以考虑分块思路

js 代码

1        const ul = document.getElementById("ul")
2        //创建测试数组
3        function cerateArr(size) {
4            let arr = []
5            for (let i = size; i > 0; i--) {
6                arr.push(i)
7            }
8            return arr
9        }
10        // 渲染函数
11        function render(arr) {
12            for (let i = 0; i < arr.length; i++) {
13                let li = document.createElement('li')
14                li.innerHTML = `这是第${arr[i]}个`
15                ul.appendChild(li)
16            }
17        }
18        // 分块处理函数 案例只考虑整数数据
19        function chunk(array, process, context) {
20            let item = array.slice(0,10)
21            process.call(context, item)
22            if(array.length > 0) {
23                setTimeout(() => {
24                    chunk(array.slice(item.length,array.length),process,context)
25                },100)
26            }
27        }
28        let arr = cerateArr(580)
29        chunk(arr,render)
30        // 思路将数组分割再结合定时器去执行任务

效果