当涉及到处理频繁触发的事件时，如浏览器窗口大小改变、鼠标移动或按钮点击等，防抖（Debouncing）和节流（Throttling）是两种常见的优化技术，用于控制事件触发的频率，以提高性能和用户体验。
防抖（Debouncing）
防抖是指在事件被触发后，延迟一定时间后再执行处理函数。如果在这段时间内再次触发了该事件，就会取消之前的延迟执行，重新开始计时。防抖的效果是，只有在事件触发后一段时间内没有再次触发，才会执行一次处理函数。
应用场景：
- 输入框搜索：在用户输入搜索关键字时，可以使用防抖来避免在每次输入时都立即触发搜索请求，而是等待用户停止输入一段时间后再发起请求，以减少不必要的网络请求。
- 窗口大小改变：当窗口大小频繁改变时，可以使用防抖来确保只有在用户完成调整窗口大小操作后才执行相应的处理逻辑，避免过多的重复计算。
- 按钮点击：当用户点击按钮进行某个操作时，使用防抖可以避免用户多次点击导致重复执行操作。
代码
代码不一定正确，欢迎指出错误：github.com/OrzMiku/cod…
/**
* 防抖 debounce
*/
/**
* debounceConfig
* T1: 函数参数类型
* T2: 函数返回类型
* func: 目标函数
* delay: 延迟
*/
export interface debounceConfig <T1,T2>{
func: (...args:T1[])=>T2;
delay: number
}
export function debounce<T1,T2>(config: debounceConfig<T1,T2>): (...args:T1[])=>void{
let timer: number | null = null
return (...args: T1[])=>{
if(timer) clearTimeout(timer);
timer = setTimeout(()=>{
config.func(...args)
timer = null
}, config.delay)
}
}
节流（Throttling）
节流是指在一定时间间隔内，只允许事件触发一次处理函数。无论事件触发频率有多高，都会按照一定的时间间隔执行一次处理函数。
应用场景：
- 页面滚动：在用户滚动页面时，可能会频繁触发滚动事件。使用节流可以控制滚动事件处理函数的执行频率，以避免过多的计算和渲染。
- 实时更新：例如股票市场数据的实时更新显示，可以使用节流来限制数据更新频率，保持页面的响应性能。
- 鼠标移动：在监听鼠标移动事件时，使用节流可以确保只在一定时间间隔内处理鼠标移动的位置，避免过于频繁的计算或更新。
代码
代码不一定正确，欢迎指出错误：github.com/OrzMiku/cod…
/**
* 节流 throttle
*/
/**
* throttleConfig
* T1: 函数参数类型
* T2: 函数返回类型
* func: 目标函数
* delay: 延迟
*/
export interface throttleConfig <T1,T2>{
func: (...args:T1[])=>T2;
delay: number
}
export function throttle <T1, T2>(config:throttleConfig<T1,T2>):(...args:T1[])=>void{
let timer: number | null = null
let last:number | null = null
return (...args:T1[])=>{
let now:number = +new Date()
if(last && now < last + config.delay){
if(timer) clearTimeout(timer)
timer = setTimeout(()=>{
last = now
config.func(...args)
timer = null
},config.delay)
}else{
last = now
config.func(...args)
}
}
}
在实际应用中，根据具体的需求和场景，选择使用防抖或节流可以有效地优化用户体验，减少不必要的计算和资源消耗。要根据事件的特性和业务需求来判断使用哪种优化技术更为合适。