JS实现节流与防抖

前言：节流和防抖就是为了减少性能开销和提升用户体验而生的，主要优化【接口暴击】【表单重复提交】【搜索框搜索输入】等相关问题；

节流

定义：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

生活化理解：王者荣耀的技能施法，如果点击某个技能(触发)，需要等待若干秒之后，才可以点击(触发)，也就是先触发后等待固定时间才能再次触发；

应用场景：滚动加载更多、搜索框搜的索联想功能、高频点击、表单重复提交……

/*** 节流* @param fn* @param delay* @returns*/
export const throttle = (fn, delay = 2000) => {let timer: any = null;return (...args) => {if (timer) {return;} // 如果上一次没结束，直接returnfn.call(undefined, ...args);timer = setTimeout(() => {timer = null; // 标记结束}, delay);};
};

防抖

定义：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

生活化理解：王者荣耀的回城需要8秒，我们点击了回城，在这8秒内如果因为敌人小兵野怪等的攻击或自身移动了导致回城中断，若此时继续回城，则重新计算，同样需要8秒；

应用场景：搜索框搜索输入，并在输入完以后自动搜索、手机号，邮箱验证输入检测、窗口大小 resize 变化后，再重新渲染。

/*** 防抖* @param handleTP* @param delay* @returns*/
export const debounce = (fn, delay = 2000) => {let timer: any = null;return (...args) => {// 如果是第一次进入，timer没有被赋值，不会进入此判断if (timer !== null) {clearTimeout(timer); // 清空计时器，准备重新计时}timer = setTimeout(() => {// 开始计时fn.call(undefined, ...args); // 调用实际方法timer = null;}, delay);};
};