节流throttle防抖debounce的函数封装

一、节流：立刻执行，如果在n秒内再次触发，则不执行。

可以理解为技能冷却，冷却期间不能使用技能。核心思想：限制频率

简单函数封装

export const throttle = (fn: any, delay: 800) => {let timer: any = null;return function () {const context = this;const args = arguments;if (!timer) {fn.apply(context, args);}timer = setTimeout(() => {timer = null;}, delay);};
};

使用场景

场景	说明	为什么使用节流
滚动事件scroll	监听页面滚动做动画或加载	滚动事件太过频繁，节流可以减轻性能压力
窗口resize	监听页面尺寸变化调整布局	控制调整频率，防止卡顿
按钮点击	防止按钮被连续点击触发多次	限制点击间隔
鼠标移动事件mousemove	图拽绘图操作	控制渲染频率，防止卡顿

二、防抖: n秒后执行该事件；如果n秒内被触发，则重新计时

可以理解为英雄回城，打断要重新开始，等英雄不动了再执行。核心思想：延迟执行

简单函数封装：

export const debounce = (fn: any, delay = 800) => {let timer: any = null;return function () {const context = this;const args = arguments;if (timer) {clearTimeout(timer);}timer = setTimeout(() => {fn.apply(context, args);}, delay);};
};

使用场景

场景	说明	为什么使用防抖
输入框搜索	用户输入时，调用接口搜索	避免每次输入都发送请求，只在停止输入后发一次
浏览器resize	用户调整窗口大小时重新布局	只在调整完成后执行一次布局计算
表单验证	用户输入表单内容时实时验证	避免每个字母都出发验证函数
鼠标移入提示	鼠标停留一段时间后显示提示框	防止用户快速滑过多个元素频繁触发