防抖和节流

下文总结下笔试题中常见的js手写函数：

1、实现一个防抖函数（debounce）

原理：在事件被触发n秒后再执行回调，只执行一次

使用场景：

1、按钮提交场景：防止多次点击，只执行最后提交的一次；

2、表单验证、搜索联想词需要服务端配合，只执行一段连续的输入事件的最后一次；

const debounce = (fn, delay)=>{
    let timer = null;
    return (...args)=>{
       clearTimeout(timer);
       timer = setTimeout(()=>{
           fn.apply(this, args)
       },delay)
    };
};

2、实现一个节流函数（throttle）

原理：在一个单位时间内，只能触发一次函数。

使用场景：

1、拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动；

2、缩放场景：监控浏览器resize;

3、动画场景：避免短时间内多次触发动画引起性能问题；

const throttle = (fn, delay = 300)=>{
    let flag = true;
    return (...args)=>{
        if(!flag) return;
        flag = false;
        setTimeout(()=>{
            fn.apply(this,args);
            flag = true;
        },delay)
    };
};