防抖与节流函数：探索用户交互中的顺畅与效率

前端

2023-11-17 22:04:27

防抖和节流函数都是JavaScript中常用的函数调用优化技术，它们可以帮助我们提高用户交互的顺畅性和效率。

防抖函数

防抖函数是一种用于处理连续触发事件的函数，它可以防止函数在短时间内被重复调用。防抖函数的原理是，当事件触发时，相应的函数不会立即触发，而是等待一段时间。当事件连续触发时，函数的触发等待时间会被不断重置（推迟）。

通俗的讲，防抖就是，每次触发事件时，在一段时间后（例如 300 毫秒）才触发一次函数调用。这样可以防止函数在短时间内被重复调用，避免不必要的计算和资源浪费，从而提高性能和响应能力。

节流函数

节流函数也是一种用于处理连续触发事件的函数，但它的工作方式与防抖函数不同。节流函数的原理是，当事件触发时，函数会在一定的时间间隔内只触发一次。即使事件在时间间隔内被多次触发，函数也只会在时间间隔结束时触发一次。

通俗的讲，节流就是，在一段时间内（例如 1 秒）只允许函数触发一次。这样可以确保函数不会在短时间内被重复调用，从而避免不必要的计算和资源浪费，提高性能和响应能力。

防抖函数与节流函数的差异

防抖函数和节流函数都是用于处理连续触发事件的函数，但它们的工作方式和应用场景不同。

防抖函数适用于需要在一段时间后执行一次函数调用的场景，例如：搜索框输入、滚动事件、窗口调整事件等。
节流函数适用于需要在一定的时间间隔内只执行一次函数调用的场景，例如：按钮点击事件、鼠标移动事件、键盘按下事件等。

使用示例

// 防抖函数
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

// 使用防抖函数
const searchInput = document.getElementById('search-input');
const searchFunction = () => {
  // 这里执行搜索操作
};
searchInput.addEventListener('input', debounce(searchFunction, 300));

// 节流函数
function throttle(func, wait) {
  let lastCallTime = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastCallTime >= wait) {
      func.apply(this, args);
      lastCallTime = now;
    }
  };
}

// 使用节流函数
const button = document.getElementById('button');
const clickHandler = () => {
  // 这里执行点击操作
};
button.addEventListener('click', throttle(clickHandler, 1000));