分时函数封装【JavaScript】

抛出问题

现象：假如页面上有一个按钮,点击之后向页面上添加100000个元素,造成卡顿效果。

原因：意思就是假如有很多任务排队执行，现在造成卡顿，为什么会卡顿呢？是因为有渲染帧存在，现在有一个长任务执行，导致渲染帧被迫延后了。

解决：如何解决呢？不能一次性把任务全部执行完，需要分布去处理。

    <button class="btn">插入100000个元素</button>
    <script>
        const tasks = Array.from({ length: 100000 }, (_, i) => () => {
            const div = document.createElement("div")
            div.innerText = i
            document.body.appendChild(div)
        })
        let btn = document.querySelector(".btn")

        btn.onclick = () => {
            performTask(tasks, schedule)
        }
    </script>

封装通用性performTask函数

首先需要考虑这个函数的执行时机是什么，其次就是每一次执行的量是多少

我们可以传递一个schedule调度器函数，在这个函数中传递执行时机。

例如：

        btn.onclick = () => {
            const schedule = (runChunk) => {
                let count = 0
                setTimeout(() => {
                    runChunk(() => count++ < 3)
                }, 1000);
            }
            performTask(tasks, schedule)
        }

schedule函数中接受需要执行的任务runChunk，执行时机是1000ms执行一次，执行量是一个函数

每一次执行3次。

        function performTask(tasks, schedule) {
            // 何时执行下一步
            // 每一步的执行量
            let index = 0
            function _run() {
                schedule((isGoOn) => {
                    while (index < tasks.length && isGoOn()) {
                        tasks[index++]()
                    }
                    if (index < tasks.length) {
                        _run()
                    }
                })
            }
            _run()
        }

封装通用性idlePerformTask函数

在我们的浏览器中，我们希望执行的时机是在每一帧渲染后剩余的空闲时间来执行我们的任务，

执行量就是空闲时间内执行的数量。

所以我们可以调用requestIdleCallback在浏览器空闲的时间执行任务。

        function idlePerformTask(tasks) {
            performTask(tasks, (runChunk) => {
                requestIdleCallback((idle) => {
                    runChunk(() => idle.timeRemaining() > 0)
                })
            })
        }