渲染列表类的数据时,往往会做批量渲染DOM的操作,类似通讯录好友列表商品列表之类的数据有可能会很多,几十几百上千条,如果一下子全部渲染出来会导致浏览器卡顿假死或者崩溃,我们可以用分时函数来优化这个过程,一次性渲染一千条数据改为每100毫秒渲染10条数据:
var showDom = function (data,fn,num) { var obj, t, len = data.length, start = function () { if(Object.prototype.toString.call(data) == '[object Array]'){ //这里要判断传进来的参数是否是数组,以及需要渲染数据的条数是否超过数据总数 for(var i=0;i<Math.min(num || 1,data.length);i++){ var obj = data.shift(); fn(obj); } } }; return !function(){ t = setInterval(function(){ if(data.length == 0){ return clearInterval(t); }; start(); },100) }(); }; var fn = function(obj){ var div = document.createElement('p'); div.innerHTML = obj; document.body.appendChild(div); }; var myArr = []; for(var a=0;a<1000;a++){ myArr.push(a); }; showDom(myArr,fn,10);