基本使用
const id = requestIdleCallback(function(idle){
idle.didTimeout; // 回调是否因为超时执行
idle.timeRemaining(); // 当前空闲时间剩余的毫秒数
}, {
timeout:5000, // 强制超时未执行时,将回调放入事件循环中排队
}
)
window.cancelIdleCallback(id); // 取消任务
特点
- 对非高优先级的任务使用空闲回调,不能保证每次事件循环(甚至每次屏幕更新)后都能执行空闲回调,可以使用的空闲时间上限为 50 ms
- 避免在空闲回调中改变 DOM,空闲回调执行的时候,当前帧已经结束绘制了,所有布局的更新和计算也已经完成。如果回调做的改变影响了布局,可能会强制停止浏览器并重新计算
- 如果回调需要改变 DOM,应该使用 window.requestAnimationFrame() 来替换。
回退到 setTimeout
window.requestIdleCallback = window.requestIdleCallback || function(handler) {
let startTime = Date.now();
return setTimeout(function() {
handler({
didTimeout: false,
timeRemaining: function() {
return Math.max(0, 50.0 - (Date.now() - startTime));
}
});
}, 1);
}
window.cancelIdleCallback = window.cancelIdleCallback || function(id) {
clearTimeout(id);
}
文章来源地址https://www.toymoban.com/news/detail-569751.html
文章来源:https://www.toymoban.com/news/detail-569751.html
到了这里,关于requestIdleCallback 低优先级任务的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!