解读 JavaScript 函数防抖与函数节流，提升用户交互和性能

解读 JavaScript 函数防抖与函数节流

在 JavaScript 开发中，函数防抖和函数节流是一种广泛采用的技术，它们可以优化用户交互和提升性能。本文将深入剖析这两种技术，探讨它们的应用场景和实现方式。

应用场景

防抖： 当用户频繁触发某个事件（如调整输入框内容、滚动窗口）时，防抖技术可以确保相关函数不会频繁执行。它会延迟函数执行，直到事件停止触发一定时间后才执行。

节流： 当需要限制函数在特定时间间隔内执行的次数时，节流技术便派上用场。它会在指定时间段内只执行函数一次，即使函数被多次触发。

实现方式

防抖：

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

节流：

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

实战示例

防抖： 可用于搜索栏输入框，在用户停止输入后才触发搜索请求，避免频繁请求服务器。

const searchInput = document.getElementById("search-input");

const debouncedSearch = debounce(() => {
  const searchQuery = searchInput.value;
  // 这里执行搜索请求逻辑
}, 500);

searchInput.addEventListener("input", debouncedSearch);

节流： 可用于窗口滚动事件，限制函数在滚动每隔 500 毫秒才执行一次，优化性能。

const throttleHandler = throttle(() => {
  // 这里执行与滚动有关的逻辑
}, 500);

window.addEventListener("scroll", throttleHandler);

总结

防抖和节流是 JavaScript 开发中常用的优化技术，通过限制函数执行频率，它们可以提升用户体验和提高应用程序性能。通过了解这两种技术的原理和实现方式，开发者可以灵活运用它们来解决实际开发问题。