防抖和节流

相信前端工程师们都听过防抖（debounce）和节流（throttle）这两个高级词汇。其实它们都是用来优化性能的，准确来说就是控制事件的触发频率以便提高性能和避免资源浪费

应用场景：

用来处理一些频繁触发的事件，例如mousedown、mousemove、keyup、keydown等。

防抖

防抖就是在n秒内只执行最后一次，如果在规定的时间内在次触发该事件，则会重新计算函数的执行时间。

 实现思路：

当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。

代码实现：

/**
 * 防抖：防抖是指在事件触发n秒后在执行回调，如果在n秒内再次被触发，则重新计算时间
 * @param fn 代表一个函数，里面可能会频繁发生回调或ajax请求
 * @param delay 表示间隔多少毫秒才触发，默认200毫秒
 * @returns 
 */
export function debounce(fn,delay=200){
    let timer = null;//用于清除定时器
    return function (){
        //判断该函数是否在执行
        if(timer){
            clearTimeout(timer);//触发则清除该定时器
        }
        timer = setTimeout(() => {
            fn.apply(fn,arguments);
            timer=null;
        }, delay);
    }
}

节流

节流是指连续触发事件但是在一定的时间内只执行一次事件。

实现思路：

固定周期内，只执行一次动作，若有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期。

代码实现：

/**
 * @param fn 代表一个函数，里面可能会频繁发生回调或ajax请求
 * @param delay 表示间隔多少毫秒才触发，默认200毫秒
 * @returns 
 */
export function throttle(fn,delay=200){
    let timer = null;
    return function (){
        if(timer) return;
        timer = setTimeout(() => {
            fn.apply(fn,arguments);
            timer=null;
        }, delay);
    }
}