TypeScript 防抖和节流：性能优化利器

在 TypeScript 中，防抖 (Debounce) 和节流 (Throttle) 是常用的性能优化技术，用于限制事件触发的频率。

防抖的原理是在事件触发后延迟一定时间再执行回调函数，如果在这个延迟时间内又触发了该事件，则重新计时。这样可以避免频繁触发事件导致的性能问题。

下面是一个 TypeScript 的防抖函数的示例：

function debounce(func: Function, delay: number) {
  let timer: number | null;
  
  return function(this: any, ...args: any[]) {
    if (timer) {
      clearTimeout(timer);
    }
    
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

使用方式如下：

function handleClick() {
  console.log('Button clicked');
}

const debouncedClick = debounce(handleClick, 300);

document.getElementById('myButton')?.addEventListener('click', debouncedClick);

这个例子中，handleClick 函数会在点击按钮后延迟 300 毫秒执行，如果在这个延迟时间内又点击了按钮，则重新计时。

节流的原理是在一定时间间隔内只执行一次回调函数，忽略剩余的事件触发。这样可以降低事件触发的频率，减少性能消耗。

下面是一个 TypeScript 的节流函数的示例：

function throttle(func: Function, delay: number) {
  let lastExecTime = 0;
  
  return function(this: any, ...args: any[]) {
    const now = Date.now();
    
    if (now - lastExecTime > delay) {
      func.apply(this, args);
      lastExecTime = now;
    }
  };
}

使用方式如下：

function handleScroll() {
  console.log('Scrolling');
}

const throttledScroll = throttle(handleScroll, 300);

window.addEventListener('scroll', throttledScroll);

这个例子中，handleScroll 函数会在每次滚动事件触发时延迟 300 毫秒执行，如果在这个延迟时间内又触发了滚动事件，则忽略剩余的事件触发。

总结起来，防抖和节流都是通过控制事件触发的频率来减少性能消耗。防抖适用于需要等待一段时间无活动后才执行回调的场景，而节流适用于需要控制事件触发的频率不超过一定间隔的场景。