JavaScript 分時函數(shù)

■知識點

    分時函數(shù)與函數(shù)節(jié)流的設計思路相近，但應用場景略有不同。當批量操作影響到頁面性能時，如一次往頁面中添加大量D0M節(jié)點，顯然會給瀏覽器渲染帶來影響，極端情況下可能會出現(xiàn)卡頓或假死等 現(xiàn)象。

■實例設計

設計思路：把批量操作分批處理，如把1秒鐘創(chuàng)建1000個節(jié)點，改為每隔200毫秒創(chuàng)建10個節(jié)點等。

【實現(xiàn)代碼】

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) {     //如果全部節(jié)點都已經(jīng)被創(chuàng)建好

                return clearlnterval(t);

          }

          start ();

        }, 200);                   //分批執(zhí)行的時間間隔，也可以用參數(shù)的形式傳入

    };

};

    timeChunk函數(shù)接受3個參數(shù)，第1個參數(shù)表示批量操作時需要用到的數(shù)據(jù)，第2個參數(shù)封裝了批量操作的邏輯函數(shù)，第3個參數(shù)表示分批操作的數(shù)量。

【應用代碼】

下面在代碼中插入10000個span元素，由于數(shù)量巨大，這里使用分時函數(shù)進行分批操作。

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)();