动静皆妙用 - JavaScript中的防抖与节流

2024-01-25 00:02:51

动态世界的守护者 - 防抖与节流

在前端开发中，我们经常会遇到需要对用户交互做出响应的情况。例如，当用户在输入框中输入文字时，我们需要实时更新搜索结果；当用户滚动页面时，我们需要动态加载更多内容。这些场景都涉及到对事件的频繁触发，如果我们不加以控制，可能会导致性能问题和用户体验不佳。

防抖和节流技术应运而生，它们可以帮助我们优化事件处理，提高前端应用的性能和响应性。

防抖 - 沉着应对，从容不迫

1. 定义

防抖（Debounce）是一种技术，它可以限制一个函数在指定的时间间隔内只执行一次。这意味着，即使函数被多次触发，它也不会在指定的时间间隔内再次执行。

2. 使用场景

防抖通常用于以下场景：

搜索框输入：当用户在搜索框中输入文字时，我们通常希望在用户停止输入后才执行搜索操作。这样可以防止不必要的搜索请求，提高搜索性能。
滚动加载：当用户滚动页面时，我们通常希望在用户停止滚动后才加载更多内容。这样可以防止页面卡顿，提高用户体验。
窗口调整：当用户调整浏览器窗口大小时，我们通常希望在用户停止调整窗口大小时才重新渲染页面。这样可以防止页面频繁重绘，提高性能。

3. 代码实现

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

节流 - 有条不紊，滴水不漏

1. 定义

节流（Throttle）是一种技术，它可以限制一个函数在指定的时间间隔内最多执行一次。这意味着，即使函数被多次触发，它也只会在指定的时间间隔内执行一次。

2. 使用场景

节流通常用于以下场景：

鼠标移动：当用户移动鼠标时，我们通常希望在鼠标停止移动后才执行相应的操作。这样可以防止不必要的操作，提高性能。
键盘输入：当用户按下键盘按键时，我们通常希望在用户松开按键后才执行相应的操作。这样可以防止不必要的操作，提高性能。
动画效果：当我们执行动画效果时，我们通常希望在动画效果完成前只执行一次动画效果。这样可以防止动画效果卡顿，提高用户体验。

3. 代码实现

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