分时函数
TIP
什么是分时函数?比如你需要新增1000个div到body, 这个时候直接绘制1000个div到body,其实浏览器是非常有压力的。 但是如果把这个1000个div用50m分批绘制,一批200个(10m), 那这个时候浏览器的压力就小了, 这个就是分时。
js
//第一步先确定参数
//参数一 应该是数组(1000) Array
//参数二 应该是分批绘制的动作也就是个回调函数 Function
//参数三 应该是每次分批的绘制的量 Number
//参数四 应该是没批次绘制的时间(ms) Date
//结论函数应该是这个样的 timeChunk([], function() {}, 10, 1000)
/**
* @params { Array } ary
* @params { Function } fn
* @params { Number } count
* @params { Number } interval
*/
//第一步 先写分批绘制的函数start()
//condition 是咱们的count分批数量多少比如(100), Math.min(count || 1, ary.length)这个主要是兼容吧 怕ary的长度小了
//循环调用fn()回调, ary一直截取前一个
function timeChunk(ary, fn, count, interval) {
const start = function() {
let i = 0;
const condition = Math.min(count || 1, ary.length)
while (i < condition) {
let a = ary.shift();
fn(a);
i++;
}
}
}
//第二步:首次立刻调用
function timeChunk(ary, fn, count, interval) {
const start = function() {
let i = 0;
const condition = Math.min(count || 1, ary.length)
while (i < condition) {
let a = ary.shift();
fn(a);
i++;
}
}
//第一次立刻调用(第一批)
let firstTime = true;
return function() {
if(firstTime) {
start();
firstTime = false;
}
}
}
//第三步 然后再定时器分批次绘制(有点节流的感觉哈)我也是这个么觉得的
function timeChunk(ary, fn, count, interval) {
const start = function() {
let i = 0;
const condition = Math.min(count || 1, ary.length)
while (i < condition) {
let a = ary.shift();
fn(a);
i++;
}
}
//第一次立刻调用(第一批)
let firstTime = true, time;
return function() {
if(firstTime) {
start();
firstTime = false;
}
//写个定时器执行咱们的分批任务
time = setInterval(() => {
if(ary.length === 0) {
clearInterval(time);
}
start();
}, interval || 500)
}
}
//使用起来
let ary = new Array(100).fill(0);
const renderList = timeChunk(ary, function() {
console.log('我是timeChunk分批绘制函数平均每2秒绘制10次')
}, 10, 2000);
renderList();