requestIdleCallback

光羽住

已于 2023-11-16 19:13:38 修改

阅读量225

点赞数

分类专栏：前端文章标签：前端

于 2023-11-16 19:12:08 首次发布

本文链接：https://blog.youkuaiyun.com/q865768338/article/details/134448749

版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了浏览器的requestIdleCallbackAPI，它允许开发者在浏览器空闲时执行低优先级任务。文章详细解释了API的工作原理、回调机制、timeout选项以及兼容性处理，并给出了使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

requestIdleCallback

插入一个函数，这个函数将在浏览器空闲时期被调用。会返回一个ID。提供给Window.cancelIdleCallback(ID) 方法来结束回调

requestIdleCallback(callback, options)
//callback  函数会接收到一个名为 IdleDeadline 的参数
//options 一个对象。
//options 选项：  timeout：如果指定了 timeout，并且有一个正值，而回调在 timeout 毫秒过后还没有被调用，那么回调任务将放入事件循环中排队，即使这样做有可能对性能产生负面影响。

兼容性

window.requestIdleCallback = window.requestIdleCallback || function (handler){
  let startTime = Date.now();
  return setTimeout(function(){
    handler({
      didTimeout: false,
      timeRemaining: function(){
        return Math.max(0, 50 - (Date.now() - startTime));
      }
    })
  }, 1)
}
window.cancelIdleCallback = window.cancelIdleCallback || function(id){
  clearTimeout(id);
}

示例

if(this.requestId){
  cancelIdleCallback(this.requestId);
  this.requestId = null;
}
let obj = {list: []};
let addFun= (deadline) => {
  while (deadline.timeRemaining() > 0 && i < list.length){
    obj.list.push(list[i]);
    i++;
  }
  if(i < list.length){
    this.requestId = requestIdleCallback(addFun);
  }
}
this.requestId = requestIdleCallback(addFun)