JS 中的反跳：构建更好的 Web 应用程序-js教程-PHP中文网

JS 中的反跳：构建更好的 Web 应用程序

Susan Sarandon

发布： 2024-12-06 19:56:11

原创

311 人浏览过

Debouncing in JS: Building better web apps

您是否曾经访问过某个网站，在搜索栏中输入内容，并注意到建议是如何实时弹出的，而不会造成任何延迟？或者，您可能已经填写了一份表格，并在打字时看到“用户名已被占用”消息出现。这些无缝体验的背后是现代网络开发中一个强大的、常常被忽视的英雄：去抖动。

什么是去抖动？

去抖动是一种编程技术，可确保函数仅在指定的不活动时间后执行。想象一下您正在搜索栏中输入内容。如果没有去抖，每次击键都会触发函数调用，可能会因冗余请求而压垮系统。去抖动通过在执行函数之前等待输入暂停来解决这个问题，确保只发送一个请求。

它是如何运作的？

其核心是控制函数执行的频率。但为了更容易理解，让我们举一个门铃的例子。假设有一个门啤酒在 3 秒不活动后响起。在初次响铃后，如果用户尝试多次按铃，除非他决定再过 3 秒，否则它不会响。

在 JavaScript 中，去抖动通常与输入、滚动或调整大小等事件侦听器一起使用。这是一个基本的实现：

function debounce(callback, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      callback(...args);
    }, delay);
  };
}

登录后复制

让我们了解这段代码的不同元素：

debounce：创建并返回给定函数的去抖版本的主函数。
回调：去抖延迟后执行的函数。
延迟：函数在执行回调之前应在最后一个事件之后等待的时间（以毫秒为单位）。
timeoutId 定义为保存 setTimeout 创建的计时器的标识符。这使我们能够在开始新计时器之前清除任何正在进行的计时器，从而防止不必要或重复的函数执行。
clearTimeout 取消与 timeoutId 关联的任何现有计时器。

实际用例

搜索输入字段： 实时搜索是去抖的经典用例。如果没有它，每次击键都可能触发数据库查询，从而使服务器不堪重负。通过去抖，仅在用户停止键入后才调用该函数，从而减少服务器负载并提高性能。

function debounce(callback, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      callback(...args);
    }, delay);
  };
}

登录后复制

表单验证： 表单上的即时反馈固然很棒，但验证每次击键的输入可能会占用大量资源。去抖动允许您延迟验证，直到用户停止键入。

const handleSearch = debounce((query) => {
  fetch(`https://api.example.com/search?q=${query}`)
    .then((response) => response.json())
    .then((data) => console.log(data));
}, 500);

document.getElementById("search").addEventListener("input", (e) => {
  handleSearch(e.target.value);
});

登录后复制