分時函數

在前面關於函數節流的討論中，咱們提供了一種限制函數被頻繁調用的解決方案。下面咱們將遇到另一個問題，某些函數確實是用戶主動調用的，但由於一些客觀的緣由，這些函數會嚴重地影響頁面性能。

一個例子是建立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();