有时候页面需要加载上千条数据时候,防止浏览器卡顿,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();