JavaScript 分時(shí)函數(shù)
■知識(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)();
點(diǎn)擊加載更多評(píng)論>>