节流/防抖/分时/惰性加载

JavaScript

概念

• 函数节流（throttle）：一定时间间隔内，函数只会执行一次。
• 函数防抖（debounce）：任务频繁触发时，只有触发时间间隔超过一定时间，才会执行，否则只执行最后一次，重新计算间隔时间。

应用

节流

• 函数被频繁调用的场景
  
  • window.onresize 事件
  • mousemove 事件
  • 上传进度

实现

节流（throttle）

通过闭包 + setTimeout，保存一个能否执行的 token，如果不可执行，则 return；否则执行。执行语句最后应该将 token 改为可执行。

function throttle(fn, interval = 500) {
    const _fn = fn;
    let timer, firstTime = true;
    return function(...args) {
        const that = this;
        if (firstTime) {
            _fn.call(that, ...args);
            firstTime = false;
            return;
        }
        if (timer) {
            return;
        }
        timer = setTimeout(() => {
            timer = null;
            _fn.call(that, ...args);
        }, interval)
    }
}

防抖

通过闭包，保存一个标记 setTimeout 的值，每次输入时 clearTimeout 已有值，重新 setTimeout。这样就能保证输入字符后的 interval 内触发时，不重复执行。

function debounce(func, wait) {
    const _fn = func;
    let time;
    return function(...args) {
        const that = this;
        clearTimeout(time);
        time = setTimeout(() => {_fn.apply(this, args)}, wait)
    }
}

区别

区别是，防抖（debounce）会重新计算间隔时间；而节流（throttle）没有清空计时器，故不会重新计算间隔时间

分时

短时间内向页面中添加大量的 DOM 节点会导致浏览器卡顿或假死。
分时函数用来控制一定时间内的处理数量。
第一个参数是数据集合，第二个是创建添加节点的函数，第三个是每一次创建节点的数量：

const timeChunk = (arr, fn, count = 8) => {
    let t;
    const createNode = () => {
        for (let i = 0; i < Math.min(count, len); i++) {
            const obj = arr.shift();
            fn(obj);
        }
    }
    return () => {
        t = setInterval(() => {
            if (arr.length === 0) return clearInterval(t);
            createNode();
        }, 200);
    };
};

创建好后清除计时器，也可以手动修改间隔时间等参数。

惰性加载函数

开发中因为浏览器之间的差异，一些嗅探工作不可避免，addEventListener 和 attachEvent 的区别。

需要注意的是这些嗅探其实只需要执行一次就可以了，通过在函数内部重写嗅探结果得出的函数（不能用 const 声明了）可以实现惰性加载的函数：

let addEvent = function(ele, type, handler) {
    if (window.addEventListener) {
        addEvent = function(ele, type, handler) {
         ele.addEventListener(type, handler, false);
        }
    } else if (window.attachEvent) {
        addEvent = function (ele, type, handler) {
            ele.attachEvent(`on${type}`, handler);
        }
    }
    addEvent(ele, type, handler);
}