javascript設計模式第三章分時函式

舉一個例子是建立WebQQ 的QQ 好友列表。列表中通常會有成百上千個好友，如果一個好友用一個節點來表示，當我們在頁面中渲染這個列表的時候，可能要一次性往頁面中建立成百上千個節點。在短時間內往頁面中大量新增DOM節點顯然也會讓瀏覽器吃不消，我們看到的結果往往就是瀏覽器的卡頓甚至假死。程式碼如下：

var ary = [];
    for (var i = 1; i <= 1000; i++) {
        ary.push(i); // 假設ary 裝載了1000 個好友的資料
    };
    var renderFriendList = function (data) {
        for (var i = 0, l = data.length; i < l; i++) {
            var div = document.createElement('div');
            div.innerHTML = i;
            document.body.appendChild(div);
        }
    };
    renderFriendList(ary);

這個問題的解決方案之一是下面的timeChunk 函式，timeChunk 函式讓建立節點的工作分批進行，比如把1 秒鐘建立1000 個節點，改為每隔200 毫秒建立8 個節點。timeChunk 函式接受3 個引數，第1 個引數是建立節點時需要用到的資料，第2 個引數是封裝了建立節點邏輯的函式，第3 個參數列示每一批建立的節點數量。程式碼如下：

    var timeChunk = function (ary, fn, count) {
        var obj,
            t;
        var len = ary.length;
        var start = function () {
            for (var i = 0; i < Math.min(count || 1, ary.length); i++) {
                var obj = ary.shift();
                fn(obj);
            }
        };
        return function () {
            t = setInterval(function () {
                if (ary.length === 0) { // 如果全部節點都已經被建立好
                    return clearInterval(t);
                }
                start();
            }, 200); // 分批執行的時間間隔，也可以用引數的形式傳入
        };
    };

最後我們進行一些小測試，假設我們有1000 個好友的資料，我們利用timeChunk 函式，每一批只往頁面中建立8 個節點：

var ary = [];
    for (var i = 1; i <= 1000; i++) {
        ary.push(i);
    };
    var renderFriendList = timeChunk(ary, function (n) {
        var div = document.createElement('div');
        div.innerHTML = n;
        document.body.appendChild(div);
    }, 8);
    renderFriendList();