请讲解JS中的防抖和节流

### JavaScript 中防抖和节流的原理及实现方式 #### 1. 防抖（Debouncing） 防抖的核心思想是：当事件被触发时，设置一个定时器延迟执行回调函数；如果在设定的延时期间内再次触发相同的事件，则清除之前的定时器并重新计时。只有当最后一次触发之后经过了指定的时间间隔，才会真正执行回调函数。 ##### 实现代码示例 ```javascript function debounce(func, wait = 500) { let timeout; return function(...args) { clearTimeout(timeout); // 清除上次未到期的定时器 timeout = setTimeout(() => func.apply(this, args), wait); // 设置新的定时器 }; } ``` 这种机制非常适合应用于输入框自动补全、窗口尺寸调整等场景中[^1]。例如，在用户停止打字后的几秒钟再发起请求获取建议列表项，这样可以减少不必要的网络请求次数从而提高效率[^2]。 --- #### 2. 节流（Throttling） 与防抖不同的是，节流的目标是在固定时间段内最多只允许某段代码被执行一次。即便在此期间多次尝试去触发展开行为也只会取第一次或者最后那次有效而已。常见的做法有两种——基于时间戳版本以及标志位控制版。 ##### 时间戳版本实现代码示例 ```javascript function throttleByTimestamp(func, limit = 1000){ var lastCallTime=0;//记录最近一次成功调用func的时间点 return function(...args){ const now=new Date().getTime(); if(now-lastCallTime>=limit){ lastCallTime=now; return func.apply(this,args); } } } ``` 另一种更灵活的方式则采用布尔型变量作为开关状态指示灯来管理访问权限： ```javascript function throttleByFlag(func,delay=1000){ let canRun=true; //初始状态下是可以运行的状态 return function(...args){ if(!canRun)return ;//不可运行就直接退出 canRun=false; //标记为不可运行 setTimeout(()=>{ func.apply(this,args); canRun=true; //恢复可运行状态 },delay); } } ``` 这两种不同的策略各有优劣之处，开发者可以根据实际情况选取最适合自己项目需求的那一款解决方案[^4]。 --- #### 应用场景分析 - **防抖的应用** - 文本输入实时搜索：等待用户完全结束输入后再发送查询请求。 - 窗口大小改变(onresize):防止因快速拉伸浏览器造成大量重复渲染工作负担过重的情况发生。 - **节流的应用** - 页面滚动(scroll)加载更多内容：每隔一段时间检查是否到达底部进而决定是否追加新条目显示出来而不是每次滚一点都做判断。 - 鼠标连续点击按钮：限定单位时间内只能响应单次动作避免误操作引发连锁反应损害系统稳定性[^3]。 ---