手写防抖、节流，防抖和节流的区别 ？

首先，我们来看看如何手写防抖和节流函数：

1、防抖（debounce）：

function debounce(fn, delay) {
  let timeout = null;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

// 使用示例
const debouncedFn = debounce(function () {
  console.log('执行了防抖函数！');
}, 1000);
debouncedFn();
debouncedFn(); // 只有在1000ms后执行，不会立即执行

2、节流（throttle）：

function throttle(fn, delay) {
  let prev = Date.now();
  return function () {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - prev > delay) {
      fn.apply(context, args);
      prev = now;
    }
  };
}

// 使用示例
const throttledFn = throttle(function () {
  console.log('执行了节流函数！');
}, 1000);
throttledFn();
throttledFn(); // 每隔1000ms执行一次，不会因为多次调用而立即执行

防抖和节流函数的作用都是在一定时间内控制函数的执行频率，但它们的实现方法和用途有所不同。

1. 防抖：防抖是在一定时间内只允许执行一次函数，如果在这段时间内又触发了函数，则重新计时。例如，在滚动事件中，我们可以使用防抖函数来避免频繁的调用，只在滚动结束时执行一次函数。
2. 节流：节流是在一定时间内只允许执行一次函数，如果在这段时间内又触发了函数，则不执行。例如，在滚动事件中，我们可以使用节流函数来限制函数的执行频率，避免因为频繁的调用而导致性能问题。

总之，防抖和节流函数都是用于控制函数的执行频率，防抖是在一定时间内只执行一次函数，而节流是在一定时间内执行一次函数。在实际应用中，根据需要选择使用哪种函数。