timechunk

针对批量处理，操作dom的解决方案

by lv san

CSS

div {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  margin-bottom: 6px;
}

JavaScript

var dataList = [];
// 模拟生成500个数据
for (var i = 1; i <= 500; i++) {
	dataList.push(i);
}
// 渲染数据到页面
var renderData = timeShareRender(dataList, function(data) {
	var oDiv = document.createElement('div');
	oDiv.innerHTML = data;
	document.body.appendChild(oDiv);
}, 6);
// 分时间段将数据渲染到页面
function timeShareRender(data, fn, num) {
	var cur, timer;
	var renderData = function() {
		for(var i = 0; i < Math.min(num, data.length); i++) {
			cur = data.shift();
			fn(cur)
		}
	};

	return function() {
		timer = setInterval(function(){
			if(data.length === 0) {
				return clearInterval(timer)
			}
			renderData()
		}, 1000);
	}
}

// 渲染数据到页面
renderData();