什么是防抖和节流？应该如何实现？

防抖（Debounce）

防抖是一种技术，它可以让一个函数在一段时间内只执行一次，即使在这个时间段内触发了多次。这通常用于处理用户输入事件，例如当用户在输入框中输入时，我们不想在每次按键时都触发搜索，而是在用户停止输入一段时间后才触发。

实现防抖的常用方法是使用计时器。当函数被触发时，我们启动一个计时器。如果在计时器结束之前函数再次被触发，则重置计时器。只有当计时器结束时，函数才会被执行。

以下是一个用 JavaScript 实现防抖的示例：

function debounce(func, wait) {
  let timer;
  return function() {
    clearTimeout(timer); // 清除计时器
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, wait); // 创建计时器，在wait设置的时间后执行操作，这样当在wait设置的时间内函数被调用的话原函数不会触发
  };
}

节流（Throttle）

节流是一种技术，它可以让一个函数在一段时间内只执行一次，即使在这个时间段内触发了多次。与防抖不同的是，节流会在第一次触发时立即执行函数，然后在一段时间内禁用该函数，直到这段时间结束。这通常用于处理高频事件，例如窗口滚动或鼠标移动。

实现节流的常用方法也是使用计时器。当函数被触发时，我们启动一个计时器。如果在计时器结束之前函数再次被触发，则函数会被忽略。只有当计时器结束时，函数才会再次执行。

以下是一个用 JavaScript 实现节流的示例：

function throttle(func, wait) {
  let isThrottled = false;
  return function() {
    if (!isThrottled) {
      func.apply(this, arguments); // 第一次触发立即执行
      isThrottled = true;
      setTimeout(() => {
        isThrottled = false;
      }, wait); // 一段时间后再将isThrottled设为false，这样原函数可以继续触发
    }
  };
}