js性能优化之分时函数

分时函数和函数节流的问题不一样，函数节流针对的事件不是用户主动调用的，前面已经提过了。

函数节流的原理是：延迟当前函数的执行，如果该次延迟还没有完成，那么忽略接下来该函数的请求。也就是说会忽略掉很多函数请求。

分时函数处理的问题是用户主动调用的，比如插入千百个节点

var arr = [];
for (var i = 1; i <= 1000; i++) {
arr.push(i) //假设arr装载了100个好友数据
}
var renderFriendList = function(data) {
for (var i = 0, l = data.length; i < l; i++) {
var div = document.createElement('div');
div.innerHTML = i;
document.body.appendChild(div)
}
}
renderFriendList(arr)

分时函数的原理是让创建节点的工作分批进行，比如把1s创建1000个节点，改为每200ms创建8个节点（其实就是一种异步函数的思想）

var timeChunk = function(arr, fn, count) {
var obj, t;
var len = arr.length;
var start = function() {
for (var i = 0; i < Math.min(count || 1, arr.length); i++) {
var obj = arr.shift();
fn(obj)
}
};
return function() {
t = setInterval(function() {
if (arr.length === 0) {
return clearInterval(t);
}
start()
}, 200)
}
}
var renderFriendList = timeChunk(arr, function(n) {
var div = document.createElement('div');
div.innerHTML = n;
document.body.appendChild(div)
}, 8)
renderFriendList();