前端·
介绍
window.requestIdleCallback() 方法插入一个函数，这个函数将在浏览器空闲时期被调用。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打乱执行顺序。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="btn">点击</div>
</body>
<script>
const btn = document.querySelector('.btn')
const datas = new Array(100000).fill(0).map((_, i) => i)
btn.onclick = () => {
const taskHandler = (i) => {
const div = document.createElement('div')
div.innerText = i
document.body.appendChild(div)
}
performChunk(datas, taskHandler)
}
function performChunk(datas, taskHandler) {
if (datas.length === 0) {
return;
}
let i = 0;
// 开启下一个分片的执行
function _run() {
if (i >= datas.length) {
return;
}
// 一个渲染针中，空闲时开启分片执行
requestIdleCallback((idle) => {
while (idle.timeRemaining() > 0 && i < datas.length) {
taskHandler(datas[i], i);
i++
}
// 此次分片完成
_run()
})
}
_run()
}
</script>
</html>