位置:首頁 > 軟件操作教程 > 編程開發(fā) > JavaScript > 問題詳情

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

提問人:劉團(tuán)圓發(fā)布時(shí)間:2020-11-25

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

    分時(shí)函數(shù)與函數(shù)節(jié)流的設(shè)計(jì)思路相近,但應(yīng)用場(chǎng)景略有不同。當(dāng)批量操作影響到頁面性能時(shí),如一次往頁面中添加大量D0M節(jié)點(diǎn),顯然會(huì)給瀏覽器渲染帶來影響,極端情況下可能會(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)();

繼續(xù)查找其他問題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部