闭包实现分时函数优化批量渲染DOM的过程

来源:互联网 发布:韩顺平mysql笔记 编辑:程序博客网 时间:2024/05/22 09:48

渲染列表类的数据时,往往会做批量渲染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);