JavaScript 分时函数

■知识点

    分时函数与函数节流的设计思路相近，但应用场景略有不同。当批量操作影响到页面性能时，如一次往页面中添加大量D0M节点，显然会给浏览器渲染带来影响，极端情况下可能会出现卡顿或假死等 现象。

■实例设计

设计思路：把批量操作分批处理，如把1秒钟创建1000个节点，改为每隔200毫秒创建10个节点等。

【实现代码】

var timeChunk = function(ary, fn, count) { 

    var t;

    var start = function() {

        for ( var i = 0; i < Math.min( count || 1, ary.length ); i++ ){ 

              var obj = ary.shift ()； 

              fn( obj );

        }

    };

    return function () {

        t = setlnterval(function() {

          if (ary. length === 0) {     //如果全部节点都已经被创建好

                return clearlnterval(t);

          }

          start ();

        }, 200);                   //分批执行的时间间隔，也可以用参数的形式传入

    };

};

    timeChunk函数接受3个参数，第1个参数表示批量操作时需要用到的数据，第2个参数封装了批量操作的逻辑函数，第3个参数表示分批操作的数量。

【应用代码】

下面在代码中插入10000个span元素，由于数量巨大，这里使用分时函数进行分批操作。

var arr =[];

for(var i=l; i <= 10000;i++){

    var span = document.createElement("span"); 

    span.style.padding = "6px 12px"; 

    span.innerHTML = i;

    arr.push(span);

}

var fn = function(obj){

    document.body.appendChild(obj);

}

timeChunk(arr, fn, 100)();