精通 JavaScript 防抖与节流技巧，打造高效流畅的用户体验

前端

2023-12-26 05:44:53

驾驭 JavaScript 的防抖与节流：优化用户体验和应用程序性能

各位 JavaScript 开发者，你们是否曾陷入这样的困境：

用户在搜索框中键入时，搜索结果疯狂更新，导致页面卡顿，影响用户体验？
页面滚动时，元素疯狂重新加载，带来视觉混乱？
用户连续点击按钮，引发不必要的函数调用，拖累应用程序性能？

这些问题都指向一个根源：函数执行频率过高。要解决它们，防抖与节流这两个技术将成为你们的得力帮手，助你们控制函数频率，优化用户体验和应用程序性能。

防抖（Debounce）

防抖是一种机制，它防止函数在一段时间内被多次调用。当事件触发时，防抖函数启动一个计时器。若事件在此期间再次触发，计时器将被重置。只有计时器到期，函数才会被调用。

防抖函数常用于处理用户输入，如搜索框输入、表单提交等。通过防抖，我们能避免函数在用户输入期间被多次调用，减少不必要的计算和网络请求。

节流（Throttle）

节流是一种机制，它限制函数在一段时间内只能被调用一次。当事件触发时，节流函数记录当前时间。若函数在此期间再次被调用，则函数将不会被执行。只有过了指定时间，函数才会再次被调用。

节流函数常用于处理事件密集型任务，如页面滚动、鼠标移动等。通过节流，我们能防止函数在短时间内被多次调用，避免不必要的计算和资源消耗。

防抖与节流的对比

防抖和节流都是控制函数执行频率的技术，但它们在适用场景和实现方式上有所不同：

防抖适用于需要在用户输入结束后执行函数的情况，如搜索框输入、表单提交等。防抖函数会等待一段时间，确保用户已停止输入，再执行函数。
节流适用于需要限制函数执行频率的情况，如页面滚动、鼠标移动等。节流函数会限制函数在一段时间内只能被调用一次，避免不必要的计算和资源消耗。

JavaScript 中的防抖与节流实现

在 JavaScript 中，我们可以使用函数节流库来实现防抖和节流，如 lodash 或 underscore。这些库提供了开箱即用的防抖和节流函数，方便直接使用。

若想自己实现防抖和节流函数，可参考以下示例代码：

// 防抖函数
function debounce(func, wait, immediate) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    if (immediate && !timeout) {
      func.apply(context, args);
    }
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

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