JavaScript-函数防抖与函数节流

函数防抖与函数节流

函数防抖和函数节流是JavaScript在处理高频事件时的一种处理手段。

函数防抖

函数防抖：把「多个信号」转化为「单个信号」，在Javascript中，如果一个事件频繁发生，事件在触发后过一段事件才执行，但是如果在这一段时间内，我们又触发了这个事件，则会重新计时。

应用场景：input、submit

function debounce (fn, delay){
    let timer = null;
    return function () {
        timer && clearTimeout(timer);
        let self = this, args = arguments;
        timer = setTimeout(function () {
            fn.apply(self, args);
        }, delay || 1000);
    }
}

函数节流

函数节流：函数节流是一定事件内如果多次触发事件只执行一次回调函数。（如果事件一直触发就相当于每隔一定时间执行一次回调）

应用场景：mousemove、resize

function throttle(fn, delay) {
    let flag = true, timer = null;
    return function () {
        if (!flag) return;
        flag = false;
        let self = this, args = arguments;
        timer = setTimeout(function () {
            flag = true;
            fn.apply(self, args);
        }, delay || 500);
    };
}