ts防抖节流用法

防抖

在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时

防抖（debounce）函数是一种在事件触发后，等待一段时间，如果在等待期间事件再次被触发，则重新开始计时，直到等待时间结束才执行函数。这可以避免在短时间内多次触发同一个事件时多次执行相应的处理函数。

在处理事件监听（如输入框输入内容等）时非常有用
作用：限制函数执行的频率，确保函数在事件停止触发一定时间后才执行一次，从而提高应用程序的性能和用户体验。
场景:
搜索框输入联想
窗口大小调整
表单验证
按钮提交事件

以下的实例是1秒调用一次这个方法debounce()

function debounce<T extends (...args: any[]) => any>(  
  func: T,  
  wait: number  
): (...args: Parameters<T>) => void {  
  let timeout: any = null; // 使用 NodeJS.Timeout 类型（如果你在 Node.js 环境中）---这里使用any会更方便  
  return function(this: any, ...args: Parameters<T>) {  
    clearTimeout(timeout!); // 使用非空断言操作符（!）因为我们已经初始化了 timeout  
    timeout = setTimeout(() => {  
      func.apply(this, args);  
    }, wait);  
  };  
}  
  
// 使用示例
const debouncedLog = debounce((message: string) => {  
  console.log(message);   // 这里可以放异步请求
}, 1000);  

节流

规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效

节流（throttling）函数是一种在特定时间内只允许某个函数执行一次的技术。它可以用于限制函数执行的频率，例如在滚动、窗口调整大小、鼠标移动等高频事件中使用，避免函数被过多调用，导致性能问题。

处理高频触发的事件时，具有显著的好处。作用：限制某个函数在一定时间间隔内的执行次数，确保函数不会因为事件的频繁触发而过于密集地执行。控制资源消耗，避免因为过度执行而导致的性能问题。
以下的实例是1秒调用一次这个方法throttle()
例子：按钮点击、窗口大小改变、滚动、鼠标移动等

场景:
滚动事件处理
页面resize事件
射击游戏中的子弹发射
表单快速提交

// 节流处理
function throttle<T extends (...args: any[]) => any>(
  func: T,
  delay: number,
): (...args: Parameters<T>) => void {
  let canRun = true
  return function (this: any, ...args: Parameters<T>): void {
    if (canRun) {
      func.apply(this, args)
      canRun = false
      setTimeout(() => {
        canRun = true
      }, delay)
    }
  }
}
// 使用示例  
const throttleLog = throttle((message: string) => {  
  console.log(message);  // 这里可以放异步请求
}, 1000); 

防抖和节流的区别

防抖(Debounce)：
多次触发，只执行最后一次
适合输入框实时搜索等场景
重在清除之前的定时器

节流(Throttle)：
一定时间内只执行一次
适合滚动事件、频繁点击等场景
重在控制执行频率

选择建议

选择防抖：
连续的事件响应只需要执行最后一次
需要等待用户输入完成后再执行

选择节流：
需要保持一定的执行频率
需要限制事件触发频率

参考引用：
https://blog.youkuaiyun.com/qq_44087571/article/details/141318964
https://blog.51cto.com/u_12379999/12979936
https://www.jb51.net/javascript/329997bfo.htm