在页面空闲的时候，执行一些计算或某些特殊本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。的后台任务，这样可以避免对用户操作带来卡著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。顿的问题。虽然js支持异步编程，但是即使【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。某些任务是异步执行的，但是因为js是单线本文作者：唐霜，转载请注明出处。【转载请注明来源】程程序，所以，如果一个任务需要花费比较长转载请注明出处：www.tangshuang.net【版权所有，侵权必究】的时间去进行计算，那么即使它是在异步回调【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。的时候执行，也会带来界面卡顿，而如果用户【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net在这个卡顿期间进行交互操作，就会明显感到【版权所有，侵权必究】未经授权，禁止复制转载。卡死状态，体验不好。

有没有一种办法避免这种情况发生？当然有，本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。最好的方式是使用webworker，启用未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】另外一个线程去执行这个需要消耗大量时间的著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。运算。因为webworker和用户界面所【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net在的线程相互不影响，所以，不会给用户带来未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】卡顿感。当计算完毕之后，通过postMe原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】ssage实现数据传递，对于用户而言，几【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。乎无感。

但是在一些特殊情况下，我们需要在用户界面【本文首发于唐霜的博客】【版权所有，侵权必究】所在的主线程去执行这种程序。比如，我们要本文版权归作者所有，未经授权不得转载。【作者：唐霜】在这个任务中获取DOM的一些信息。这个时著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】候，我们要想办法让这个任务不对用户的操作本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net造成影响。

web标准提供了requestIdleC【转载请注明来源】原创内容，盗版必究。allback这个接口，它的用法有点像r【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】equestAnimationFrame本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】，它主要用于在浏览器闲时执行某个任务。比著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。如：

var a = 0
requestIdleCallback(() => {
  a ++
})

上面这段代码，给浏览器下了一个命令，当浏【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。览器空闲的时候，执行a ++。

不过requestIdleCallbac【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。k会有一些兼容性问题，我们只能通过一些手转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net段来使它在低版本浏览器可以用：

export const requestIdleCallback = window.requestIdleCallback || function(cb, delay = 1000) {
  const start = Date.now()
  const action = () => cb({
    didTimeout: false,
    timeRemaining: function() {
      return Math.max(0, 50 - (Date.now() - start))
    },
  })
  const id = setTimeout(() => {
    timeout.id = setTimeout(action, delay)
    timeout.reset = () => {
      clearTimeout(timeout.id)
      timeout.id = setTimeout(action, delay)
    }
    document.addEventListener('keydown', timeout.reset, true)
    document.addEventListener('mousedown', timeout.reset, true)
    document.addEventListener('touchstart', timeout.reset, true)
    document.addEventListener('touchmove', timeout.reset, true)
    document.addEventListener('mousemove', timeout.reset, true)
    window.addEventListener('scroll', timeout.reset, true)
    window.addEventListener('resize', timeout.reset, true)
  })
  var timeout = { id, reset: null }

  return timeout
}
export const cancelIdelCallback = window.cancelIdelCallback || function(timeout) {
  if (!timeout) {
    return
  }

  clearTimeout(timeout.id)
  document.removeEventListener('keydown', timeout.reset)
  document.removeEventListener('mousedown', timeout.reset)
  document.removeEventListener('touchstart', timeout.reset)
  document.removeEventListener('touchmove', timeout.reset)
  document.removeEventListener('mousemove', timeout.reset)
  window.removeEventListener('scroll', timeout.reset)
  window.removeEventListener('resize', timeout.reset)

  timeout.reset = null
  timeout.id = null
}

cancelIdelCallback用于未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】取消前面下达的命令，参数是request【未经授权禁止转载】原创内容，盗版必究。IdleCallback的返回值。

不过有一个问题，就是requestIdl【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】eCallback是只执行一次的，如果我著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。们想要做一个守护程序，在浏览器空闲的时候【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。，就开始运行这个守护程序，应该怎么做呢？

/**
 * 创建一个在空闲时执行的任务
 * @param {*} fn
 */
export function autoidle(fn, interval = 1000, immediate = true) {
  var idle
  const run = () => {
    const action = () => {
      idle = requestIdleCallback(run, interval)
    }
    asyncx(fn)().then(action).catch(action)
  }
  const start = () => {
    cancelIdelCallback(idle)
    idle = requestIdleCallback(run, interval)
  }
  const stop = () => {
    cancelIdelCallback(idle)
  }

  if (immediate) {
    start()
  }

  return { start, stop }
}

这个函数可以创建一个守护程序，它可以在你【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】的浏览器空闲的时候不断运行，但你的浏览器【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net开始忙碌的时候，又不会运行的效果。另外，【转载请注明来源】著作权归作者所有，禁止商业用途转载。它返回两个函数，start 和 stop本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。，用以在必要的时候停止和重启任务。