防抖和节流的区别和封装方法

防抖

防抖触发高频率事件秒后只会执行一次，如果n秒内再次触发，则会重新计算，每次触发时都会取消之前的延时调用。常用于下拉刷新，滚动事件

function debounce(fn,delay,immediate) {
    let timer = null;
    let that = this;
    return () => {
        if(immediate){
            fn.call(that, arguments);
            immediate = false;
        }
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.call(that, immediate);
        }, delay);
    }
}

节流

在指定间隔内任务只执行一次，在每次函数执行之前，先判断是否存在定时器，存在则跳过本次执行，否则设置新的定时器。常用于按钮点击事件

function throttle(fn, delay, immediate) {
    let timer = null;
    let that = this;
    return () => {
        if(immediate){
            fn.call(that, arguments);
        }
        if(timer) return;
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.call(that, arguments);
        }, delay);
    }
}

区别

函数防抖一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次。
防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。