>[success] # 分時函數 ~~~ 1.參考js設計模式與開發實踐書： 舉一個例子是創建WebQQ 的QQ 好友列表。列表中通常會有成百上千個好友， 如果一個好友用一個節點來表示，當我們在頁面中渲染這個列表的時候， 可能要一次性往頁面中創建成百上千個節點。在短時間內往頁面中大量添加DOM 節點顯然也會讓瀏覽器吃不消，我們看到的結果往往就是瀏覽器的卡頓甚至假死 ~~~ >[danger] ##### 傳統直接寫 ~~~ 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); ~~~ >[danger] ##### 分時函數解決 ~~~ 1.解決方案之一是下面的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); // 分批執行的時間間隔，也可以用參數的形式傳入 }; }; ~~~ * 使用 ~~~ 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(); ~~~