DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript設計模式與開發實踐:分時函數
JavaScript設計模式與開發實踐:分時函數
編輯:JavaScript基礎知識     

web端在進行大量DOM數據插入的時候,如果一次性插入上千條數據,浏覽器吃不消會出現卡頓假死的情況,代碼如下:

var arr = [];
for(var i = 0; i < 1000; i++){
    arr.push(i);
}

var loadData = function(data){
    for(var i = 0, l = data.length; i < l; i++){
        var elem = document.createElement('div');
        div.innerHTML = i;
        document.body.appendChild(div);
    }
};

loadData(arr);

//創建timeChunk()函數分批插入DOM
var timeChunk = function(data, fn, count, interval ){) //data數據 fn執行的邏輯函數 count一次插入的數量 interval分批執行的時間
    var obj,t;
    var len = arr.length;
    var start = function(){
        for(var i = 0; i < Math.min(count || 1, arr.length), i++){
            var obj = arr.shift();
            fn(obj);
        }
    };
    return function(){
        t = setInterval(function(){
            if(arr.length === 0){
                return clearInterval(t);
            }
        }, interval)
    }
}

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved