分时函数(Time Slicing)是一种优化技术,用于将长时间运行的任务分解成多个小任务,并在多个帧中执行,以避免阻塞主线程,从而保持页面的响应性。在JavaScript中,可以使用requestAnimationFrame和setTimeout来实现分时函数。
以下是一个简单的分时函数封装示例:
function timeSlicing(task, options = {}) {
const { chunkSize = 10, delay = 100 } = options;
let index = 0;
let isRunning = true;
function executeChunk() {
const start = index;
const end = Math.min(index + chunkSize, task.length);
for (let i = start; i < end; i++) {
task[i]();
}
index = end;
if (index < task.length) {
setTimeout(executeChunk, delay);
} else {
isRunning = false;
}
}
executeChunk();
return {
stop() {
isRunning = false;
},
isRunning() {
return isRunning;
}
};
}
// 示例任务
const tasks = Array.from({ length: 100 }, (_, i) => () => {
console.log(`Task ${i} executed`);
});
// 使用分时函数执行任务
const timeSlicer = timeSlicing(tasks, { chunkSize: 10, delay: 50 });
// 停止分时函数
// timeSlicer.stop(); 解释timeSlicing函数:
接受两个参数:task(一个包含任务函数的数组)和options(一个包含配置选项的对象)。chunkSize:每个分片中执行的任务数量。delay:每个分片之间的延迟时间(以毫秒为单位)。executeChunk函数:
计算当前分片的起始和结束索引。执行当前分片中的所有任务。如果还有未执行的任务,使用setTimeout安排下一个分片的执行。如果没有未执行的任务,将isRunning标志设置为false。返回对象:
stop方法:用于停止分时函数的执行。isRunning方法:用于检查分时函数是否仍在运行。通过这种方式,可以将长时间运行的任务分解成多个小任务,并在多个帧中执行,从而避免阻塞主线程,保持页面的响应性。
网友回复


