如果没有这个 JavaScript 功能，95%的用户会讨厌使用你的应用程序-CSDN博客

本文链接：https://blog.csdn.net/qq449245884/article/details/139797797

学习这个强大的 JS 特性，可以极大地提高用户体验，阻止用户放弃你的应用。

并大大节省成本。

他们会讨厌你的应用程序

没有它，他们会因为糟糕的用户体验而感到恼火，永远不会回来。

示例：想象一下，已经创建了一个出色的 AI 写作助手，为编写引人入胜的故事提供有用的建议：

已经在 handleChange 中为请求设置好了API：

export function AssistantUI() {
  const [suggestions, setSuggestions] = useState('');
  const [loading, setLoading] = useState(false);

  const handleChange = async (event: any) => {
    const value = event.target.value;
    setLoading(true);
    const res = await fetch(
      'https://api.writer.example.com/suggestions',
      {
        method: 'POST',
        body: JSON.stringify({ text: value }),
      }
    );
    const json = await res.json();
    setSuggestions(json.suggestions);
    setLoading(false);
  };

  return (
    <div className="flex flex-col justify-center flex-wrap content-start">
      <textarea
        onChange={handleChange}
        className="mt-2 mb-4"
        cols={40}
        rows={10}
      />
      {/* ... */}
    </div>
  );
}

但不幸的是，存在一个严重的问题 - 你能发现吗？👇

我刚开始写作，你的 AI 立刻就在告诉我关于拼写错误的胡说八道！

我的呼吸空间在哪里？你不能至少让我停止打字吗？

哦不，我完了——你毁了我的一天，我永远不会回来😠。

但幸运的是，那只是你在另一个现实中的样子——真正的你已经知道这样的用户体验最好是令人烦恼，最糟糕的是令人愤怒。

这就是为什么你知道这是编写 handleChange 的更好方式：

export function AssistantUI() {
  const [suggestions, setSuggestions] = useState('');
  const [loading, setLoading] = useState(false);

  const timeout = useRef<NodeJS.Timeout | null>(null);
  const handleChange = async (event: any) => {
    const value = event.target.value;
    setLoading(true);

     // 重新启动延迟
    clearTimeout(timeout.current!);

   //  在获取数据前延迟1秒
    timeout.current = setTimeout(async () => {
      const res = await fetch(
        'https://api.writer.example.com/suggestion',
        {
          method: 'POST',
          body: JSON.stringify({ text: value }),
        }
      );
      const json = await res.json();
      setSuggestions(json.suggestions);
      setLoading(false);
    }, 1000);
  };

  return (
    <div className="flex flex-col justify-center flex-wrap content-start">
      <textarea
        onChange={handleChange}
        className="mt-2 mb-4"
        cols={40}
        rows={10}
      />
      {/* ... */}
    </div>
  );
}

现在 AI 在给出建议前会等待 1 秒！

现在每个人都爱上了你的应用程序 - 即使我们尝试，也无法停止使用它..

在编程中，我们称这种技术为防抖。

它无处不在..

Google 搜索：无论何时搜索，你都在体验防抖动的实际应用。

注意输入和自动完成更新之间的延迟。这不是延迟，而是防抖。

对话：当我们在辩论，你让我先说完我的观点再回应，你就是在防抖。

你没有打断我并开始尖叫——你通过不断设定一个潜意识的超时，确保我最终停止说话：

let silenceTimeout;
let silenceDelay = 1000;

function debounceReplyToOpponent() {
  clearTimeout(silenceTimeout);
  silenceTimeout = setTimeout(() => {
    reply('Your fallacious premises have no basis in reality');
  }, silenceDelay);
}

你损失了数千美元

用户不是唯一负载过重的 —— 服务器正在呼救。

在防抖动之前：

1000 个用户每秒打字 10 次 = 10 x 60 x 1000 = 600,000 次请求每分钟！

这个负载并不是云计算的功能问题，但是成本呢？

尤其是因为你可能正在使用像 OpenAI 或 GCP Vertex 这样的昂贵的 AI 服务。

打字频率不再重要 - 如果他们每分钟暂停打字 10 次，那就没关系

10 x 1000 = 10,000 次请求每分钟！请求和成本减少了 98.3%！

之前每天花费 1000 美元，但现在的花费少于 170 美元（！）

你过去花一天的时间，现在需要花一周的时间。这要归功于防抖。

但是你可以做得更好

好吧，但那仍然相当于每月 5000 美元 - 我们能做得更好吗？

用户中有 90%是免费的，我们需要将他们的使用量保持在最低限度。

幸运的是，你非常聪明，所以你很快就想出了这个：

```javascript
const timeout = useRef<NodeJS.Timeout | null>(null);
const ignoring = useRef<boolean>(false);
const handleChange = async (event: any) => {
  if (plan === 'free') {
    // 仍在忽略，所以返回
    if (ignoring.current) return;

    // 开始忽略 20 秒
    ignoring.current = true;
    setTimeout(() => {
      ignoring.current = false;
    }, 20 * 1000);
  }

  debounce();
  const value = event.target.value;
  setLoading(true);
  const res = await fetch(
    'https://api.writer.example.com/suggestion',
    {
      method: 'POST',
      body: JSON.stringify({ text: value }),
    }
  );
  const json = await res.json();
  setSuggestions(json.suggestions);
  setLoading(false);
};

在获取他们的最后一个建议后，你将忽略免费用户 20 秒。

所以他们每分钟只有 3 个建议。

900 个免费用户，100 个付费用户。

900 x 3 + 100 x 10 = 3,700 次请求每分钟 - 从降至1,900。

一箭双雕：