## 八、window.requestIdleCallback()
还有一个函数[window.requestIdleCallback()](https://w3c.github.io/requestidlecallback/),也可以用来调节重新渲染。
它指定只有当一帧的末尾有空闲时间,才会执行回调函数。
~~~
requestIdleCallback(fn);
~~~
上面代码中,只有当前帧的运行时间小于16.66ms时,函数fn才会执行。否则,就推迟到下一帧,如果下一帧也没有空闲时间,就推迟到下下一帧,以此类推。
它还可以接受第二个参数,表示指定的毫秒数。如果在指定 的这段时间之内,每一帧都没有空闲时间,那么函数fn将会强制执行。
~~~
requestIdleCallback(fn, 5000);
~~~
上面的代码表示,函数fn最迟会在5000毫秒之后执行。
函数 fn 可以接受一个 deadline 对象作为参数。
~~~
requestIdleCallback(function someHeavyComputation(deadline) {
while(deadline.timeRemaining() > 0) {
doWorkIfNeeded();
}
if(thereIsMoreWorkToDo) {
requestIdleCallback(someHeavyComputation);
}
});
~~~
上面代码中,回调函数 someHeavyComputation 的参数是一个 deadline 对象。
deadline对象有一个方法和一个属性:timeRemaining() 和 didTimeout。
(1)timeRemaining() 方法
timeRemaining() 方法返回当前帧还剩余的毫秒。这个方法只能读,不能写,而且会动态更新。因此可以不断检查这个属性,如果还有剩余时间的话,就不断执行某些任务。一旦这个属性等于0,就把任务分配到下一轮`requestIdleCallback`。
前面的示例代码之中,只要当前帧还有空闲时间,就不断调用doWorkIfNeeded方法。一旦没有空闲时间,但是任务还没有全执行,就分配到下一轮`requestIdleCallback`。
(2)didTimeout属性
deadline对象的 `didTimeout` 属性会返回一个布尔值,表示指定的时间是否过期。这意味着,如果回调函数由于指定时间过期而触发,那么你会得到两个结果。
> * timeRemaining方法返回0
> * didTimeout 属性等于 true
因此,如果回调函数执行了,无非是两种原因:当前帧有空闲时间,或者指定时间到了。
~~~
function myNonEssentialWork (deadline) {
while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0)
doWorkIfNeeded();
if (tasks.length > 0)
requestIdleCallback(myNonEssentialWork);
}
requestIdleCallback(myNonEssentialWork, 5000);
~~~
上面代码确保了,doWorkIfNeeded 函数一定会在将来某个比较空闲的时间(或者在指定时间过期后)得到反复执行。
requestIdleCallback 是一个很新的函数,刚刚引入标准,目前只有Chrome支持。