防抖和节流

防抖函数（ts版本）

防抖 在处理事件监听（如按钮点击、窗口大小改变、滚动等）时非常有用，作用：限制函数执行的频率，确保函数在事件停止触发一定时间后才执行一次，从而提高应用程序的性能和用户体验。
以下的实例是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);  

节流函数（ts版本）

防抖 处理高频触发的事件时，具有显著的好处。作用：限制某个函数在一定时间间隔内的执行次数，确保函数不会因为事件的频繁触发而过于密集地执行。控制资源消耗，避免因为过度执行而导致的性能问题。
以下的实例是1秒调用一次这个方法throttle()

// 节流处理
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);