JavaScript设计模式与开发实践：分时函数

Posted 2020-06-11

web端在进行大量DOM数据插入的时候，如果一次性插入上千条数据，浏览器吃不消会出现卡顿假死的情况，代码如下：

var arr = [];
for(var i = 0; i < 1000; i++){
    arr.push(i);
}

var loadData = function(data){
    for(var i = 0, l = data.length; i < l; i++){
        var elem = document.createElement(‘div‘);
        div.innerhtml = i;
        document.body.appendChild(div);
    }
};

loadData(arr);

//创建timeChunk()函数分批插入DOM
var timeChunk = function(data, fn, count, interval ){) //data数据 fn执行的逻辑函数 count一次插入的数量 interval分批执行的时间
    var obj,t;
    var len = arr.length;
    var start = function(){
        for(var i = 0; i < Math.min(count || 1, arr.length), i++){
            var obj = arr.shift();
            fn(obj);
        }
    };
    return function(){
        t = setInterval(function(){
            if(arr.length === 0){
                return clearInterval(t);
            }
        }, interval)
    }
}