【JavaScript】JS优化：防抖与节流

【防抖】

一般应用在计算页面滚动条距离，页面resize，输入框blur之类的场景，当用户操作时，一般会多次触发，造成过多的资源浪费，此时可以使用防抖

let debounce = function (action, delay) {
    let timer = null;

    return function () {
        // 当用户再次触发方法的时候，清除重新计时
        clearTimeout(timer);
        timer = setTimeout(() => {
            // 直到用户在delay时间内，没有再次操作触发方法，才真正执行逻辑
            action.apply(this, arguments);
        }, delay);
    };
};

// 具体想实现的逻辑
function operationFn() {
    console.log("debounce---");
}

// 触发
window.onclick = debounce(operationFn, 500);

【节流】

当用户一直做操作，在我们限定的时间内，我们就无法真正实现逻辑，但是产品却需要在5s内必须执行一次，则此时可以使用节流

let throttle = function (action, delay) {
    let statTime = 0;

    return function () {
        let currTime = +new Date();
        // '+'的目的是通过隐式类型转换将该数据类型转换为Number类型，若转换失败，则返回NaN;
        if (currTime - statTime > delay) {
            // 在delay时间到了的时候，必须会执行一次
            action.apply(this, arguments);
            statTime = currTime;
        }
    };
};

// 具体要实现的逻辑
function operationFn() {
    console.log("throttle---");
}

window.onclick = throttle(operationFn, 1000);

【参考文章】

https://www.jianshu.com/p/7890fd811f6e