JavaScript 分時(shí)函數(shù)

■知識(shí)點(diǎn)

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

■實(shí)例設(shè)計(jì)

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

【實(shí)現(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é)點(diǎn)都已經(jīng)被創(chuàng)建好

                return clearlnterval(t);

          }

          start ();

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

    };

};

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

【應(yīng)用代碼】

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

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