js防抖和节流 区别及实现方式

JS防抖和节流都是一些常见的优化页面性能的技术，它们可以避免过多的重复操作和减少事件频率，提高页面交互体验。防抖和节流的实现方式都是基于定时器来实现的。

防抖（Debounce）：是指在事件触发后延迟一段时间再进行处理，如果在这段时间内又触发了该事件，则重新计时。最常见的应用场景是当用户在输入框中输入内容时，等待用户输入完成一段时间后再查询数据。防抖的实现方式是在触发事件后设置定时器，如果在定时器时间结束之前又触发了该事件，则清除原来的定时器，重新设置一段时间的定时器。

节流（Throttle）：是指在一定时间内只对事件进行一次处理。最常见的应用场景是在页面滚动时，只触发少量的事件。节流的实现方式是在事件处理函数中判断当前时间与上一次处理时间的时间间隔是否超过设置的阈值，如果超过则执行事件处理函数并更新时间，否则不执行处理函数。

总的来说，防抖和节流的核心都是限制事件的触发频率，但是它们的实现方式和应用场景不同。防抖更适用于需要等待用户输入等操作，而节流更适用于一些高频率事件，如页面滚动。在实际开发中，根据具体场景选择防抖和节流的方式可以有效地提高页面交互体验。

相关问题

防抖和节流概念及实现方式面试题

防抖和节流是前端开发中常用的优化技术，它们都可以避免频繁触发和执行代码。防抖和节流的主要区别在于防抖只会在上一个操作执行完成后才会执行下一个操作，而节流会在一定时间间隔内最多执行一次操作。实现方式可以通过原生 JavaScript 或者第三方库来实现，比如 lodash 中的 debounce 和 throttle 函数都能够实现防抖和节流。

js防抖和节流代码实现

JavaScript中的防抖（Debounce）和节流（Throttle）是处理函数频繁触发导致性能问题的常见技巧，它们的区别在于：

- **防抖（Debounce）**：当一个事件连续触发多次时，只有在最后一次触发后的一段时间内如果没有再次触发，才会执行回调函数。这是为了防止短期内连续的操作堆积在一起，只执行一次。

- **节流（Throttle）**：无论事件触发多少次，都会保证在一定时间间隔内只执行一次回调。这有助于限制函数执行频率，比如滚动事件，确保不会因为快速滚动而过于频繁地执行处理滚动的函数。

以下是简单的防抖和节流实现：

// 防抖实现 (Debounce)
function debounce(func, delay) {
  let timeoutId;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(context, args), delay);
  };
}

// 节流实现 (Throttle)
function throttle(func, delay) {
  let lastExec = Date.now();
  return function() {
    const context = this;
    const args = arguments;
    if (Date.now() - lastExec >= delay) {
      func.apply(context, args);
      lastExec = Date.now();
    }
  };
}

你可以像这样使用它们：

const throttledFunction = throttle(function toBeLimited() {
  console.log('This function is throttled');
}, 500); // 每隔500毫秒执行一次

const debouncedFunction = debounce(function toBeDebounced() {
  console.log('This function is debounced');
}, 300); // 只在最后一次触发后300毫秒内执行