概念

1. 防抖（Debounce）

当事件被触发后，等待一定的时间间隔，如果在这个时间间隔内事件再次被触发，则重新计时。只有当事件停止触发一段时间后，才会执行事件处理函数。

2. 节流（Throttle）

当事件被触发后，只有在一定的时间间隔内执行一次事件处理函数。即使事件在时间间隔内多次触发，也只会执行一次事件处理函数。

防抖（Debounce）

应用场景

1. 输入框搜索：在用户输入搜索关键词时，可以使用防抖技术来延迟触发搜索请求，以避免用户输入过快导致频繁的搜索请求，从而减少服务器压力和提升用户体验。
2. 窗口调整：当需要监听窗口大小调整事件时，可以使用防抖技术来限制窗口调整事件的触发频率，避免频繁执行窗口调整事件处理函数。

代码示例

// 防抖函数
function debounce(func, delay) {
  let timer;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

// 输入框搜索示例
const searchInput = document.getElementById('searchInput');
const searchButton = document.getElementById('searchButton');

function performSearch() {
  const searchTerm = searchInput.value;
  // 执行搜索操作，比如发起搜索请求
  console.log('Searching for:', searchTerm);
}

// 使用防抖函数包装搜索操作
const debouncedSearch = debounce(performSearch, 300);

// 监听输入框输入事件
searchInput.addEventListener('input', debouncedSearch);

// 点击按钮立即执行搜索（可选）
searchButton.addEventListener('click', performSearch);

在上述示例中，当用户在输入框中输入搜索关键词时，会触发 performSearch 函数。通过使用 debounce 函数对 performSearch 函数进行防抖处理，可以延迟执行搜索操作，避免用户输入过快导致频繁的搜索请求。

节流（Throttle）

应用场景

1. 按钮点击：在一些需要用户点击按钮进行操作的场景中，可以使用节流技术来限制按钮点击的频率，避免用户多次点击按钮导致重复操作或者性能浪费。
2. 页面滚动：在需要监听页面滚动事件的场景中，可以使用节流技术来限制滚动事件的触发频率，以减少滚动事件处理函数的执行次数，提高页面性能。

代码示例

// 节流函数
function throttle(func, delay) {
  let lastExecTime = 0;
  return function() {
    const context = this;
    const args = arguments;
    const currentTime = Date.now();
    if (currentTime - lastExecTime >= delay) {
      func.apply(context, args);
      lastExecTime = currentTime;
    }
  };
}

// 页面滚动示例
function handleScroll() {
  console.log('Handling scroll event');
  // 执行页面滚动处理操作
}

// 使用节流函数包装页面滚动处理函数
const throttledScroll = throttle(handleScroll, 200);

// 监听页面滚动事件
window.addEventListener('scroll', throttledScroll);

在上述示例中，当用户滚动页面时，会触发 handleScroll 函数。通过使用 throttle 函数对 handleScroll 函数进行节流处理，可以限制页面滚动事件的触发频率，避免频繁执行滚动处理操作。这样可以减少页面滚动事件处理函数的执行次数，提高页面性能。

总结

防抖和节流都是用于限制事件触发频率的技术，有助于提高性能和优化用户体验。

防抖的应用场景包括输入框搜索、按钮点击等，它通过延迟触发事件来避免频繁的触发，减少不必要的请求和操作。

节流的应用场景包括页面滚动、窗口调整等，它通过限制事件触发的频率来减少事件处理函数的执行次数，提高页面性能。

在 JavaScript 中，可以使用自定义的防抖和节流函数来对事件处理函数进行处理，从而实现对事件触发频率的控制。