js 防抖、节流

89 阅读1分钟

防抖

是触发间隔大于time才会触发,每次在小于间隔time点击的时候,会重置time

节流

是不管time内触发多少次,只会每间隔time时间才会触发一次

假设time = 100ms,一人间隔50ms输入一个字符,那么500ms后,防抖触发1次,节流触发5次

举个例子:

防抖

const functiona(){
    let timer;
    clearTimeout(timer);
    timer = setTimeout(() => {
    this.functionb()
    },500}
}

const functionb(){
console.log('执行了一次')
}

节流

function throttle(fn, time) {
    let temp = false;
    return function () {
        if (temp) {
            return;
        } else {
            temp = true; //节流阀设置为true
            setTimeout(() => {
                fn.apply(this, arguments);
                temp = false;
            }, time);
        }
    };
}
function sayHi(e) {
    console.log("宽", e.target.innerWidth);
}
window.addEventListener("resize", throttle(sayHi, 1000));