高阶函数，前端切片处理提升用户体验，代码复制即用

使用范围ALL

/**
 * 高阶函数之数组切片
 * @M楸M 前言
 * 好处: 解决页面卡顿加载缓慢问题
 * 常用于渲染真实dom节点数据量大问题
 * 从根源上去处理这个问题 页面卡顿基本原因是主线程阻塞16.6ms渲染一次
 * 在16.6毫秒间分段处理
 * **/ 

function performChunk(data, taskHandler, scheduler) {
    if (typeof data === 'number') {
        data = {
            length: data
        }
    }
    /**数组长度为0结束处理**/ 
    if (data.length === 0) {
        return
    }
    let i = 0
    /**开启下一个分片的执行**/ 
    function _run() {
        /**防止分片越界**/ 
        if (i >= data.length) {
            return
        }
        /**下一个分片任务的执行时机，一个渲染帧中空闲的时候开启分片执行  一帧16.6毫秒**/ 
        scheduler((goOn) => {
            /**idle.timeRemaining剩余时间**/ 
            while (goOn() && i < data.length) {
                taskHandler(data[i], i)
                i++;
            }
            _run()
        })
    }
    /**开启时调用函数开始切片处理**/ 
    _run()
}

/** 封装默认切片和自定义切片 **/ 

function browforChunk(data, taskHandler, customerScheduler) {
    const scheduler = (task) => {
        requestIdleCallback((idle) => {
            task(() => idle.timeRemaining())
        })
    }
    if (customerScheduler) {
        performChunk(data, taskHandler, customerScheduler)
    } else {
        performChunk(data, taskHandler, scheduler)
    }
    
}


/**使用案例***/ 
(function() {
    const data = [1,2,3,4,5]
    const taskHandler = (_, i) => {
        console.log(i)
    }

    const scheduler = (task) => {
        setTimeout(() => {
            const now = performance.now()
            task(() => performance.now() - now <= 10)
        }, 1000);
    }

    browforChunk(data, taskHandler, scheduler)
})()