函数防抖/节流

众所周知，函数节流和函数防抖都是优化高频率执行js代码的一种方法，二者的区别及使用方法如下：

函数防抖

函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

export const Debounce = function(func, wait, immediate) {
    let timeout, result;
    return function() {
        let context = this, args = arguments;
        let later = function() {
            timeout = null;
            if (!immediate) result = func.apply(context, args);
        };
        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) result = func.apply(context, args);
        return result;
    };
};

函数节流

函数节流，就是指限制函数在一段时间内只执行一次

export const Throttle = function(func, wait) {
    let context, args, timeout, result;
    let previous = 0;
    let later = function() {
        previous = new Date;
        timeout = null;
        result = func.apply(context, args);
    };
    return function() {
        let now = new Date;
        let remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0) {
            clearTimeout(timeout);
            timeout = null;
            previous = now;
            result = func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(later, remaining);
        }
        return result;
    };
};

异同点

一、相同：
1、都可以降低函数的调用频率，一定程度上可以提高性能；
2、都可以用定时器实现；
二、不同：
假定设置节流/防抖时间间隔为1S：
1、函数节流：
- 在用户连续操作的时间内，每隔一秒钟就会调用一次函数；
- 函数调用时机：在用户某个操作时段的开始的时刻；
2、函数防抖：
- 在用户连续操作的时间内，只有两次调用的时间间隔大于1S时会调用一次，若未到1S时再一次触发，则清空计时器，重新计时，直到间隔大于1S的时候才会调用一次；
- 函数调用时机：在用户某个连续操作时段结束后+需要延迟的时间 的时刻；