回答

分时函数（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方法：用于检查分时函数是否仍在运行。

通过这种方式，可以将长时间运行的任务分解成多个小任务，并在多个帧中执行，从而避免阻塞主线程，保持页面的响应性。