js-节流与防抖

节流

节流是指将高频率触发的事件，降低频率触发，如缩放窗口、滚动文档时，会频繁触发，我们使得事件不是每次都执行，而是间隔一定时间后再执行。

/**
* fn: 触发后执行的函数
* delay：时延, number，单位是s
* immediate：是否先执行一次 boolean
/
function throttle(fn, delay, immediate) {
    let timer = null;
    return function() {
        let args = arguments;
        let that = this;
        
        if(immediate) {
            fn.apply(that, args);
            immediate = false;
        }
        
        if(!timer) {
            timer = setTimeout(() => {
                fn.apply(that, args);
                timer = null;
            }, delay)
        }
    }
}

注意： return的函数不能使用箭头函数，因为箭头函数没有arguments

节流除了用定时器实现外，也可以考虑用时间判断是否超过时延时间

function throttle(fn, delay) {
    let start = Date.now();
    return function() {
        let args = arguments;
        let that = this;
        let now = Date.now();
        if(now - start >= delay) {
            fn.apply(that, args);
            start = now;
        }
    }
}

防抖

防抖是指当操作频繁触发时，只执行最后一次的操作。如用户输入信息时进行检索，会频繁触发input事件，只有当用户输入停止一定时间后才执行最后的一次。

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