小白问：“分时函数是干什么用的？”
“同样也是为了让JS的性能更加的出色，避免在短时间调用大量数据的时候产生的卡顿感！说白了一起都是为了用户体验！毕竟体验为王嘛！”，麦克回答道
小白又问：“举个真实案例OK吗?”
“这个在网上有很多，比如手机版的今日头条，我们在刷新闻或者视频的时候，只要产生滚动就会加载数据没错吧？”
“是的。”小白点点头。
“那么如果一次加载10条数据没有问题，但一次加载2000条数据会怎么样？” 麦克问
“那肯定会变的很卡，或者一直在loading吧”
“正解”
闲言少叙，直接看代码见真章
分数函数（throttle）的实现
先看下没有经过优化的代码:
那么这2000多次的循环瞬间就完成了，当然这样的计算量还是没什么问题的，但如果我们是调用服务器端的数据恐怕就没这么乐观了。
接下来我们先了解下分时函数的实现逻辑，代码不是重点，重点是解决问题的思路和想法。
假设，我们要生产2000个机器人，有两个生产方案。
方案一：一个小时全部生产出来连轴转，全部生产完成后交付客户,毫无疑问这将会让客户等待一个小时。
方案二：将这两2000个机器人分组，可以是10个一组也可以是20个一组，然后按组进行生产，比如20分钟生产一组，完成一组后马上交付客户，接着生产下一组。那么客户20分钟就能得到一组机器人，感受是不是会好很多呢？
我们的分时函数就是方案二。
分时函数代码如下：
小白说：“这个函数的思路我是理解的，只是其中有一句不是特别明白”
Math.min(count || 1, arr.length)
首先 Math.min是求最小值，语法格式如下：
Math.min(x,y)
然后是 JavaScript中的||（与运算符）
只要有一个条件为true时，结果就为true；
当两个条件都为false时，结果才为false；
当一个条件为true时，后面的条件不再判断
count || 1, arr.length的作用就是当arr.length的数值小于 count 的时候获取arr.length
举个例子：
Math.min(8 || 1, 7)
这里会先进行括号内的与运算 8 || 1结果还是8，那么就变成了
Math.min(8 ， 7)
很显然，最小值是7.
可复制代码：
var timeChunk = function (arr, fn, count) {
var obj, t;
var start = function () {
for (var i = 0; i var obj = arr.shift();
fn(obj)
}
};
return function () {
t = setInterval(function () {
if (arr.length === 0) {
return clearInterval(t);
}
start()
}, 200)
}
}
var ary = [];
for (var i = 1; i ary.push(i);
};
var renderFriendList = timeChunk(ary, function (n) {
var div = document.createElement('div');
div.innerHTML = n;
document.body.appendChild(div);
}, 10);
renderFriendList();
总结：
分时函数将大的数据进行分阶段加载，避免在获取大量数据或者计算时的卡顿现象，起到了性能优化的作用，提高了用户体验。
本文来自投稿，不代表本人立场，如若转载，请注明出处：http://www.sosokankan.com/article/1474646.html