使用 requestidlecallback 拆分长任务的核心做法是：将耗时操作分解为多个小片段，并在每个片段的末尾调用 requestidlecallback 注册下一个片段的执行函数，利用浏览器空闲期逐步完成工作。具体实现时，需定义一个包含待处理数据列表的队列，每次空闲回调中取出少量数据处理并更新进度，当队列清空或超时（deadline）时停止调度。这样做能确保主线程在任务执行期间仍能响应用户交互，避免页面卡顿。
如何构建基于队列的任务调度器
构建调度器的关键是维护一个任务队列和一个用于调度的标志位。每次从队列中取出固定数量的任务项进行处理，处理完后检查是否还有剩余任务，若有则再次请求空闲回调。这种模式允许开发者精确控制每次执行的工作量，防止单次执行时间过长。
const taskQueue = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let isScheduled = false;
function processTasks(deadline) {
let workDone = false;
while (taskQueue.length > 0 && deadline.timeRemaining() > 1) {
const item = taskQueue.shift();
console.log('Processing:', item);
workDone = true;
}
if (taskQueue.length > 0) {
requestIdleCallback(processTasks);
} else {
isScheduled = false;
console.log('All tasks completed');
}
}
if (!isScheduled) {
isScheduled = true;
requestIdleCallback(processTasks); // 初始调用通常不需要 deadline，但为了统一逻辑可传入 null 或忽略
}如何处理超时与优先级中断
在实际应用中，必须考虑 deadline 耗尽的情况。如果当前空闲时间段不足以完成所有剩余任务，需要保存当前状态以便下次继续。此外，可以通过设置不同的优先级来调整任务的执行顺序，虽然 requestIdleCallback 本身不支持复杂的优先级队列，但可以通过维护多个队列来实现简单的高优优先策略。
立即学习“Java免费学习笔记（深入）”；
const highPriorityQueue = [101, 102];
const lowPriorityQueue = [201, 202, 203];
function idleCallback(deadline) {
let processed = false;
// 优先处理高优先级任务
if (highPriorityQueue.length > 0) {
const item = highPriorityQueue.shift();
console.log('High Priority:', item);
processed = true;
} else if (lowPriorityQueue.length > 0) {
const item = lowPriorityQueue.shift();
console.log('Low Priority:', item);
processed = true;
}
if (processed && (highPriorityQueue.length > 0 || lowPriorityQueue.length > 0)) {
if (deadline.timeRemaining() > 1) {
requestIdleCallback(idleCallback);
}
}
}
requestIdleCallback(idleCallback); // 启动调度当 deadline.timeRemaining() 小于 1 时程序行为是什么
当 deadline.timeRemaining() 返回值小于 1 毫秒时，意味着当前的空闲时间段即将结束，浏览器可能随时介入用户交互。此时，循环体内的条件判断 deadline.timeRemaining() > 1 将不再满足，循环终止。程序不会抛出错误，而是优雅地退出当前回调，等待下一次空闲回调的到来。这确保了即使时间紧迫，也不会阻塞主线程的关键渲染或输入事件。
