js性能优化之分时函数

本文主要是介绍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();

这篇关于js性能优化之分时函数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---