八、window.requestIdleCallback()

還有一個(gè)函數(shù)window.requestIdleCallback()，也可以用來(lái)調(diào)節(jié)重新渲染。

它指定只有當(dāng)一幀的末尾有空閑時(shí)間，才會(huì)執(zhí)行回調(diào)函數(shù)。

requestIdleCallback(fn);

上面代碼中，只有當(dāng)前幀的運(yùn)行時(shí)間小于16.66ms時(shí)，函數(shù)fn才會(huì)執(zhí)行。否則，就推遲到下一幀，如果下一幀也沒(méi)有空閑時(shí)間，就推遲到下下一幀，以此類推。

它還可以接受第二個(gè)參數(shù)，表示指定的毫秒數(shù)。如果在指定 的這段時(shí)間之內(nèi)，每一幀都沒(méi)有空閑時(shí)間，那么函數(shù)fn將會(huì)強(qiáng)制執(zhí)行。

requestIdleCallback(fn, 5000);

上面的代碼表示，函數(shù)fn最遲會(huì)在5000毫秒之后執(zhí)行。

函數(shù) fn 可以接受一個(gè) deadline 對(duì)象作為參數(shù)。

requestIdleCallback(function someHeavyComputation(deadline) {
 while(deadline.timeRemaining() > 0) {
 doWorkIfNeeded();
  }

  if(thereIsMoreWorkToDo) {
 requestIdleCallback(someHeavyComputation);
  }
});

上面代碼中，回調(diào)函數(shù) someHeavyComputation 的參數(shù)是一個(gè) deadline 對(duì)象。

deadline對(duì)象有一個(gè)方法和一個(gè)屬性：timeRemaining() 和 didTimeout。

（1）timeRemaining() 方法

timeRemaining() 方法返回當(dāng)前幀還剩余的毫秒。這個(gè)方法只能讀，不能寫(xiě)，而且會(huì)動(dòng)態(tài)更新。因此可以不斷檢查這個(gè)屬性，如果還有剩余時(shí)間的話，就不斷執(zhí)行某些任務(wù)。一旦這個(gè)屬性等于0，就把任務(wù)分配到下一輪requestIdleCallback。

前面的示例代碼之中，只要當(dāng)前幀還有空閑時(shí)間，就不斷調(diào)用doWorkIfNeeded方法。一旦沒(méi)有空閑時(shí)間，但是任務(wù)還沒(méi)有全執(zhí)行，就分配到下一輪requestIdleCallback。

（2）didTimeout屬性

deadline對(duì)象的?didTimeout?屬性會(huì)返回一個(gè)布爾值，表示指定的時(shí)間是否過(guò)期。這意味著，如果回調(diào)函數(shù)由于指定時(shí)間過(guò)期而觸發(fā)，那么你會(huì)得到兩個(gè)結(jié)果。

• timeRemaining方法返回0
• didTimeout 屬性等于 true

因此，如果回調(diào)函數(shù)執(zhí)行了，無(wú)非是兩種原因：當(dāng)前幀有空閑時(shí)間，或者指定時(shí)間到了。

function myNonEssentialWork (deadline) {
  while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0)
 doWorkIfNeeded();

  if (tasks.length > 0)
 requestIdleCallback(myNonEssentialWork);
}

requestIdleCallback(myNonEssentialWork, 5000);

上面代碼確保了，doWorkIfNeeded 函數(shù)一定會(huì)在將來(lái)某個(gè)比較空閑的時(shí)間（或者在指定時(shí)間過(guò)期后）得到反復(fù)執(zhí)行。

requestIdleCallback 是一個(gè)很新的函數(shù)，剛剛引入標(biāo)準(zhǔn)，目前只有Chrome支持。