如何请求后台1000条数据不卡

2019-07-16 13:43:13 阅读：266 来源： 互联网

标签：function const target batchSize batchDone 后台不卡 1000 ulContainer

(function () {
    const ulContainer = document.getElementById("list-data");
    //const ulContainer = _this.$refs.list;

    // 防御性编程
    if (!ulContainer) return;

    const total = 10000; // 插入数据的总数
    const batchSize = 4; // 每次批量插入的节点个数，个数越多，界面越卡顿
    const batchCount = total / batchSize; // 批处理的次数
    let batchDone = 0;  // 已完成的批处理个数

    function appendItems() {
        // 使用 DocumentFragment 减少 DOM 操作次数，对已有元素不进行回流
        const fragment = document.createDocumentFragment();

        for (let i = 0; i < batchSize; i++) {
            console.log(i);
            const liItem = document.createElement("li");
            liItem.innerText = batchDone * batchSize + i + 1;
            fragment.appendChild(liItem);
        }

        // 每次批处理只修改 1 次 DOM
        ulContainer.appendChild(fragment);
        batchDone++;
        doAppendBatch();
    }

    function doAppendBatch() {
        if (batchDone < batchCount) {
            // 在重绘之前，分批插入新节点
            window.requestAnimationFrame(appendItems);
        }
    }

    // kickoff
    doAppendBatch();

    // 使用 事件委托 ，利用 JavaScript 的事件机制，实现对海量元素的监听，有效减少事件注册的数量
    ulContainer.addEventListener("click", function (e) {
        const target = e.target;

        if (target.tagName === "LI") {
            alert(target.innerText);
        }
    });
})();

标签：function,const,target,batchSize,batchDone,后台,不卡,1000,ulContainer
来源： https://blog.csdn.net/Candy_mi/article/details/94616879

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

如何请求后台1000条数据不卡