使用范围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)
})()