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('
')
    				html.push('
')
    				html.push('产品');
    				html.push('
')
    				html.push('
iOS
');
    				html.push('
Android
')
    				html.push('
')
    				html.push('
')
    				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();