防抖与节流：实用指南及场景应用

前端

2023-11-28 12:23:39

防抖与节流的原理

防抖（Debouncing）：

防抖可防止函数在短时间内被重复调用。当事件触发后，防抖函数会等待一段时间，如果在这段时间内事件没有再次触发，则执行函数。如果在等待期间事件再次触发，则重新计算等待时间。这样可以有效地减少函数的调用次数，减轻服务器压力，提高程序性能。

节流（Throttling）：

节流可确保函数在一段时间内只被调用一次。当事件触发时，节流函数会立即执行一次，然后在指定的时间内忽略后续的事件触发。这样可以保证函数在一段时间内只被调用一次，避免不必要的重复调用。

防抖与节流的应用场景

防抖的应用场景：

输入框搜索：在输入框中输入文字时，防抖可以防止搜索请求在每次按键时都发送到服务器。当用户停止输入一段时间后，再将最终的搜索词发送到服务器。
窗口大小改变事件：当窗口大小改变时，防抖可以防止窗口大小改变事件在每次改变时都触发。当窗口大小停止改变一段时间后，再触发窗口大小改变事件。

节流的应用场景：

滚动事件：当页面滚动时，节流可以防止滚动事件在每次滚动时都触发。当页面滚动停止一段时间后，再触发滚动事件。
鼠标移动事件：当鼠标移动时，节流可以防止鼠标移动事件在每次移动时都触发。当鼠标停止移动一段时间后，再触发鼠标移动事件。

实现防抖与节流

防抖和节流可以在JavaScript中通过不同的方式实现。

防抖的实现：

function debounce(func, wait) {
  let timeoutId;
  return function () {
    const args = arguments;
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

节流的实现：

function throttle(func, wait) {
  let lastCallTime = 0;
  return function () {
    const args = arguments;
    const now = Date.now();
    if (now - lastCallTime > wait) {
      func.apply(this, args);
      lastCallTime = now;
    }
  };
}