debounce函数和throttle函数的区别

debounce函数和throttle函数都是用于控制函数执行频率的工具函数，但它们有不同的应用场景和实现方式。

debounce函数：

debounce函数可以防止函数在短时间内频繁地被触发，只有在指定的时间间隔内没有再次触发时才会执行函数。 debounce函数常用于监听输入框的输入，防止在用户连续输入时频繁地触发函数，例如：

function debounce(fn, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

input.addEventListener('input', debounce(handleInput, 500));

上述代码中，debounce函数接受两个参数：要执行的函数fn和时间间隔delay，返回一个新的函数。当新函数被调用时，它会清除之前的定时器，并设置一个新的定时器，在delay毫秒后执行fn函数。

throttle函数：

throttle函数可以控制函数在一定时间内只执行一次。如果在这段时间内多次触发了函数，只有第一次触发的函数会被执行，其他触发的函数会被忽略。 throttle函数常用于监听浏览器滚动、窗口调整等事件，限制事件处理函数的执行频率，例如：

function throttle(fn, delay) {
  let flag = true;
  return function() {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      flag = true;
    }, delay);
  };
}

window.addEventListener('scroll', throttle(handleScroll, 500));

上述代码中，throttle函数接受两个参数：要执行的函数fn和时间间隔delay，返回一个新的函数。当新函数被调用时，它会判断flag变量，如果为false则直接返回，否则将flag设为false，并在delay毫秒后执行fn函数，并将flag设回true。

总结：

debounce函数和throttle函数都可以控制函数的执行频率，debounce函数用于控制函数在一段时间内只执行一次，throttle函数用于控制函数在一定时间内只执行一次。它们的实现方式不同，debounce函数使用定时器实现，throttle函数使用标志位实现