防抖方法&&节流函数源码

/**
 *
 * @param fn {Function}   实际要执行的函数
 * @param delay {Number}  延迟时间，也就是阈值，单位是毫秒（ms）
 *
 * @return {Function}     返回一个“去弹跳”了的函数
 */
function debounce(fn, delay = 500) {
    // 定时器，用来 setTimeout
    let timer = null;
    // 返回一个函数，这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数
    return function () {
        // 保存函数调用时的上下文和参数，传递给 fn
        const context = this;
        const args = arguments;

        // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
        clearTimeout(timer);

        // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
        // 再过 delay 毫秒就执行 fn
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    };
}

export default debounce;

/**
 * 节流函数
 * @param method 事件触发的操作
 * @param mustRunDelay 间隔多少毫秒需要触发一次事件
 */
function throttle(fn, mustRunDelay) {
    let timer,
        args = arguments,
        start;
    return function loop() {
        let self = this;
        let now = Date.now();//时间戳
        if(!start){//若该函数是第一次调用，则直接设置start,即开始时间，为now，即此刻的时间
            start = now;
        }
        if(timer){ 
            clearTimeout(timer);
        }
        if(now - start >= mustRunDelay){
            fn.apply(self, args);
            start = now;
        }else {
            timer = setTimeout(function () { //
                loop.apply(self, args);
            }, 50);
        }
    }
}