js防抖和节流的区别

防抖和节流都是在处理频繁触发的事件时使用的优化技巧，但它们的原理和应用场景略有不同。

防抖（Debounce）是指在事件触发后，等待一段时间再去执行相关操作。如果在这段时间内又发生了该事件，就重新计时。防抖常用于处理输入框输入事件、窗口大小调整等需要限制触发频率的场景。例如，当用户连续输入时，我们可以设定一个时间间隔，在该时间间隔内没有新的输入才进行搜索操作，避免频繁触发请求。

节流（Throttle）是指在一段时间内只执行一次相关操作。无论事件触发多频繁，在指定的时间间隔内只会执行一次。节流常用于处理鼠标滚动、页面滚动等需要控制执行频率的场景。例如，当用户滚动页面时，我们可以设定一个时间间隔，在该时间间隔内只触发一次滚动事件的处理函数。

总结来说，防抖是等待一段时间后再执行操作，而节流是在一段时间内只执行一次操作。防抖适合处理连续触发的事件，节流适合控制频繁触发的事件。具体使用哪种方式取决于具体的业务需求。

相关问题

js防抖和节流

防抖和节流都是用来控制函数执行频率的方法。

防抖（debounce）：当事件被触发 n 秒后再执行回调函数，如果在这 n 秒内又触发了事件，则重新计算时间。例如，在输入框中每次输入都会触发 onchange 事件，如果我们希望用户在停止输入 n 秒后再触发回调函数，可以使用防抖来实现。

节流（throttle）：每隔一段时间执行一次回调函数，比如滚动页面时每 200ms 执行一次函数。节流可以让函数在一定程度上平滑执行，减少函数调用的次数，从而提高性能。

下面是防抖和节流的 JavaScript 实现：

防抖：

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

节流：

function throttle(func, delay) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

使用方法：

function handleInput() {
  console.log("input changed");
}

const debouncedHandleInput = debounce(handleInput, 500);
const throttledHandleInput = throttle(handleInput, 500);

// 防抖
input.addEventListener("input", debouncedHandleInput);

// 节流
window.addEventListener("scroll", throttledHandleInput);

js防抖和节流代码示例

防抖和节流都是为了解决高频率触发某个事件而导致性能问题的问题，但它们的实现方式不同。

防抖：在一个事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。

代码示例：

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

调用方式：

function handleResize() {
  console.log('窗口大小改变了');
}

window.addEventListener('resize', debounce(handleResize, 1000));

节流：在一定时间内只执行一次回调函数，即使在这段时间内触发了多次。

代码示例：

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

调用方式：

function handleScroll() {
  console.log('滚动了');
}

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