JavaScript分时函数

有时候页面需要加载上千条数据时候，防止浏览器卡顿，APP加载太慢等情况我们可以使用分时函数来分段执行。

下例每200毫秒，查询50条数据

    var timeChunk = function( ary, fn, count ){ // 参数分别是:需处理的数据数组,处理数据的函数体,一次处理多少个 200毫秒执行50条数据
        var obj, t; //需要处理第一个   
        var len = ary.length;    
        var start = function(){
            for ( var i = 0; i < Math.min( count || 1, ary.length ); i++ ){// 直到i被执行count个or执行完最后几个
                    // 每次拿第一个值值进行函数处理,.
                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<=50;i++) {
        var html = [];
        
        html.push('<ul class="mui-table-view mui-table-view-chevron">')
        html.push('<li class="mui-table-view-cell mui-collapse">')
        html.push('<a class="mui-navigate-right" style=background-color:#BFEFFF; >产品</a>');
        html.push('<ul class="mui-table-view mui-table-view-chevron">')
        html.push('<li class="mui-table-view-cell"><a class="mui-navigate-right mui-li" href="#">iOS</a></li>');
        html.push('<li class="mui-table-view-cell"><a class="mui-navigate-right mui-li" href="#">Android</a></li>')
        html.push('</ul>')
        html.push('</li></ul>')
        ary.push(html.join('')); //注意如果插入多个dom元素后，必须用一个数组包装
       }

   var item2 = document.getElementById('item2mobile');
       var renderFriendList=timeChunk(ary ,function(n){
              var div = document.createElement( 'div' );
              div.innerHTML=n;
              item2.querySelector('.mui-scroll').appendChild(div);
       },8)

调用renderFriendList();