节流防抖：揭秘流畅交互设计的秘密武器

前端

2024-01-10 19:55:46

序幕：舞动的鼠标，响应的界面

当你用灵巧的指尖轻抚鼠标，屏幕上的元素便随之起舞，仿佛它们与你的动作心意相通。这种流畅无缝的交互体验，绝非偶然，而是在程序员们的精心耕耘下结出的硕果。其中，节流和防抖技术功不可没。

第一章：节流——控制洪流，让性能更强劲

想象你在键盘上飞快地敲击，每一个按键都像一滴滴雨点落在平静的水面上，荡起层层涟漪。此时，节流就像是一位手持雨伞的绅士，他优雅地抵挡住雨点的侵袭，确保水面上波澜不惊。

1. 节流的奥秘

初识节流：
节流，顾名思义，就是控制洪流。当事件以高频触发时，它可以有效地抑制过多的函数调用，避免资源的浪费。
节流的优势：
- 提高性能：通过减少不必要的函数调用，节流可以显著提升程序的性能。
- 优化用户体验：当用户频繁操作时，节流能够保证界面的流畅性，避免出现卡顿或延迟的现象。
节流的应用场景：
- 滚动事件：当你滚动页面时，触发滚动事件的频率可能非常高。使用节流，可以限制函数的调用频率，避免不必要的性能消耗。
- 窗口大小调整事件：当用户调整浏览器窗口的大小时，窗口大小调整事件也会频繁触发。使用节流，可以避免频繁触发导致的性能问题。

2. 节流的实现

使用 JavaScript 实现节流：

const throttle = (func, delay) => {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall < delay) {
      return;
    }
    lastCall = now;
    func(...args);
  };
};

使用 React 实现节流：

import { useEffect, useState } from "react";

const useThrottle = (func, delay) => {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    let lastCall = 0;
    const timer = setInterval(() => {
      setReady(true);
    }, delay);

    return () => {
      clearInterval(timer);
    };
  }, [delay]);

  return (...args) => {
    if (ready) {
      func(...args);
      setReady(false);
    }
  };
};

第二章：防抖——等待片刻，让动作更精准

防抖，就像是一位细心的猎手，他在扣动扳机之前会耐心等待猎物进入最佳射程，确保一击必中。在交互设计中，防抖可以有效地避免因用户操作过快而导致的误操作。

1. 防抖的奥秘

初识防抖：
防抖，顾名思义，就是延迟触发。它会在一段时间内收集用户的操作，并在操作停止后才执行相应的函数。
防抖的优势：
- 避免误操作：当用户操作过快时，防抖可以避免因误操作而导致的意外结果。
- 提高准确性：防抖可以确保函数在用户操作完成后才执行，从而提高操作的准确性。
防抖的应用场景：
- 搜索框：当用户在搜索框中输入内容时，防抖可以避免频繁触发搜索请求，从而提高搜索效率。
- 表单验证：当用户在表单中输入内容时，防抖可以避免频繁触发表单验证，从而提高用户体验。

2. 防抖的实现

使用 JavaScript 实现防抖：

const debounce = (func, delay) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func(...args);
    }, delay);
  };
};

使用 React 实现防抖：

import { useEffect, useState } from "react";

const useDebounce = (func, delay) => {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    let timeout;
    const timer = setTimeout(() => {
      setReady(true);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [delay]);

  return (...args) => {
    if (ready) {
      func(...args);
      setReady(false);
    } else {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        func(...args);
        setReady(true);
      }, delay);
    }
  };
};