什么是防抖和节流，有什么区别，如何实现

防抖和节流都是性能优化技术，通常用于处理用户输入频繁触发的事件，如窗口滚动、键盘输入等。

**防抖(Debouncing)**：当事件在一个指定的时间间隔内连续触发多次时，只有最后一次的触发会被记录并执行相应的回调函数。这样可以防止短时间内频繁操作导致的无效响应。例如，你在滚动页面时请求新的数据，如果防抖设置为300毫秒，那么无论你怎么快速滚动，只要停顿超过300毫秒，才会发送一次请求。

**节流(Throttling)**：则是限制在一个时间窗口内只允许事件最多触发特定次数。比如每500毫秒内只会执行回调一次，不管触发了多少次。这样能避免回调过于频繁，减轻服务器压力。

实现上，这两种技术通常通过JavaScript的定时器配合事件监听来完成：

- **防抖实现**：当事件触发时，开始计时器，然后清空之前的计时器。如果在这段时间内事件再次触发，会更新计时器；当计时器结束，执行回调。

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, arguments), delay);
  };
}

let throttledFunction = debounce(function toBeThrottled() { /* ... */ }, 300);

- **节流实现**：类似防抖，但在每次触发时都检查是否超过了限制次数，如果没有则立即执行，超出则等待下个节流周期。

function throttle(func, delay) {
  let count = 0;
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    
    if (!timeout) {
      count++;
      timeout = setTimeout(function clearCount() {
        count = 0;
        timeout = null;
      }, delay);

    } else if (count < 1) {
      func.apply(context, args);
    }
  };
}

let throttledFunction = throttle(function toBeThrottled() { /* ... */ }, 500);