前言
在前端开发中，提升性能是一个经常需要去解决的问题。我们要从很多方面去分析项目的主要消耗在哪里，本文主要讲解防抖和节流的方面来提升性能。
防抖
什么是防抖？
防抖是一种延迟执行的操作。当事件被频繁触发的时候，延迟执行事件处理函数，并且在延迟时间内如果再次触发事件，那么就要重新计时。只有当事件在指定时间内没有再次被触发，事件函数才会执行。这样就实现了频繁触发事件只执行一次，避免了频繁触发事件造成资源浪费，从而提高了性能。
防抖主要适用于那些需要用户停止操作后才能执行的场景，就比如游戏里面的回城操作，需要英雄停止原地不能被打断才能成功回城。以下是一些防抖的应用场景举例：
- 搜索输入框：用户在输入内容的时候，不断在触发keyup事件，可以只有输入结束后发送请求
- 窗口调整：用户调整浏览器窗口的大小时，频繁触发resize事件，可以让确保调整结束后执行后续操作。
- 表单验证：用户输入完表单一项数据后，再来验证
防抖实现
function debounce(fn,wait){
let timeout;
return function(...args){
const context=this
clearTimeout(timeout)
timeout=setTimeout(()=>fn.apply(context,args),wait)
}
}
- debounce 函数接受两个参数：fn要执行的函数，wait要延迟的时间
- 每次触发事件的时候，都要先清除上一次的timeout，然后重新设置一个新的定时器
- 只有在指定的wait时间内没有触发事件，fn才会执行
节流
什么是节流？
节流是一种限制函数频率的技术，当事件被频繁触发时，函数会按照一定的时间间隔执行，而不是每次触发都执行。换句话说就是在一个时间段内只会触发一次处理函数。
节流主要适用于需要间隔时间执行的场景，在游戏里与释放英雄的技能一样，在一段时间内只能释放一次。以下是一些节流的应用场景举例：
- 按钮点击：防止用户短时间内多次点击同一个按钮，造成重复提交
- 页面滚动：用户滚动页面时触发scroll函数，使用节流限制处理函数执行的频率
节流实现
function throttle(fn,wait){
let lastTime=0
return function(...args){
const now=Date.now()
if(now-lastTime>=wait){
lastTime=now
fn.apply(this,args)
}
}
}
防抖和节流对比
| 防抖(debounce) | 节流(throttle) | |
|---|---|---|
| 定义 | 延迟执行，在指定时间内不再触发事件才执行 | 限制执行频率，每隔一定时间执行 |
| 触发事件 | 最后一次触发事件后 | 按照固定的时间间隔执行 |
| 实现原理 | 重新计时，如果时间内再次触发事件则清除计时器 | 记录上次执行事件，计算时间间隔 |
Ending
以上内容就是防抖和节流的主要内容，在实际开发过程中，根据具体情况选择合适的方法来提升性能。
