Skip to content
On this page

分时函数

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();

Released under the MIT License.