💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
## 八、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支持。