JavaScript 中怎么利用 requestIdleCallback 在浏览器空闲时执行任务-js教程-PHP中文网

requestIdleCallback 是浏览器在主线程空闲时执行低优先级任务的 API，通过 IdleDeadline 提供 timeRemaining() 和 didTimeout，支持取消、超时处理与降级兼容，适用于可中断的后台工作。

javascript 中怎么利用 requestidlecallback 在浏览器空闲时执行任务

requestIdleCallback 是浏览器提供的一个 API，用于在主线程空闲时（即没有高优先级任务如渲染、用户输入响应等）执行低优先级任务，避免阻塞关键操作，提升页面响应性。

基本用法：注册空闲回调

调用 requestIdleCallback 传入一个回调函数，浏览器会在下一个空闲时段调度执行它，并传入一个 IdleDeadline 对象，提供两个关键信息：

deadline.timeRemaining()：返回当前空闲时段还剩多少毫秒（通常 ≤ 50ms，受浏览器限制）
deadline.didTimeout：布尔值，表示是否因超时（比如等待太久未获得空闲）而强制触发

示例：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

const handleIdle = (deadline) => {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    doOneTask(); // 执行一个轻量任务
  }
  if (tasks.length > 0) {
    requestIdleCallback(handleIdle); // 未完成，继续排队
  }
};

requestIdleCallback(handleIdle);

配合 cancelIdleCallback 取消任务

如果任务不再需要执行（比如组件卸载、状态变更），可用 cancelIdleCallback 中止已注册但尚未执行的回调：

保存 requestIdleCallback 返回的 ID
在适当时机调用 cancelIdleCallback(id)

示例：

let idleId = requestIdleCallback(myTask);

// 后续取消
cancelIdleCallback(idleId);
idleId = null;

处理超时与降级兼容

当 didTimeout === true，说明浏览器久等未空闲，此时应保证任务至少执行一次（哪怕影响一点性能）。同时注意兼容性：IE 不支持，Safari 支持但曾有 bug（iOS 12.2+ 稳定），建议加降级逻辑：

检查 window.requestIdleCallback 是否存在
不存在时，用 setTimeout(..., 0) 或 Promise.resolve().then(...) 模拟（不保证“空闲”，但能延后执行）

简单降级示例：

const runIdle = (cb) => {
  if ('requestIdleCallback' in window) {
    return requestIdleCallback(cb, { timeout: 1000 });
  }
  return setTimeout(() => cb({ timeRemaining: () => 0, didTimeout: false }), 0);
};