防抖与节流

Posted 2021-02-15 wynnzen

• 节流 throttle 在指定的时间间隔内只执行一次function
• 防抖 debounce 只有当时间超过指定的时间间隔后才会触发function`

节流函数

function throttle(fn, interval = 300) {
    let flag = true;
    return function () {
        if (!flag) return; //在定时器间隔时间触发前，不会触发
        flag = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            flag = true;
        }, interval);
    };
}

防抖函数

function debounce(fn, interval = 300) {
    let timeout = null;
    return function () {
        clearTimeout(timeout); //在间隔时间内触发，会清空计时器
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, interval);
    };
}

用途

节流：滚动条滚动时增加判断逻辑

防抖：用户在input框内输入名称