数组分块思路 记一笔

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

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)
        // 思路将数组分割再结合定时器去执行任务

效果