JavaScript 中的去抖动

英文 | https://medium.com/pragmatic-programmers/debouncing-in-javascript-4c6dd704695a

翻译 | 杨小二

JavaScript 语言的发明是为了响应用户在网页上的交互。虽然大多数互动并不频繁，但有些互动可能会在短时间内反复发生。

如果你编写程序以在每次交互时执行 CPU 密集型功能，则可能会降低浏览器的速度。

你不能简单地删除函数，因为它是你程序的关键部分，但你也不能让它破坏程序的性能。

解决方案是实现去抖动功能。去抖动是一种编程技术，可让你确保任务不会频繁触发。

以实时搜索为例：每次按键都会触发一个事件，但是如果你立即对每个事件发出请求，你将不必要地使服务器陷入困境，因为用户可能还没有完成输入。

如果你想知道 async 的用途，请选择 Modern Asynchronous JavaScript（现在处于测试阶段），其中详细介绍了各种示例和模式。

更好的方法是仅在用户停止输入至少 200 毫秒后发送请求。

去抖动示例

让我们看一个例子。我们首先创建一个 HTML 输入元素，让用户输入搜索查询：

<label for="searchInput">Search:</label>
<input type="search" id="searchInput">

以下是我们的 JavaScript 代码。我们定义了一个 debounce 函数来控制我们的主函数运行的时间。 

这样，该函数不会立即发出 fetch 请求；相反，它将执行延迟 300 毫秒：

// debounce function
function debounce(callback, limit) {
  let timeout;
  return () => {
    clearTimeout(timeout);    
    timeout = setTimeout(() => {
      callback();
    }, limit);
  };
}
// main function
async function queryGoogle(e){
  // use your own API key in production
  const api = `https://www.googleapis.com/customsearch/v1?key=AIzaSyDDafor7FhfUGTvGpjVdE7Tomnt1Yg6XGg&cx=017576662512468239146:omuauf_lfve&q=${searchInput.value}`;


  const response = await fetch(api);


  // parse the body text as JSON
  const data = await response.json();


  // process the data
  console.log(data);
}
// pass our main function to the debounce function
// the second parameter defines the delay in milliseconds
const debouncedKeyPress = debounce(queryGoogle, 300);
const searchInput = document.getElementById('searchInput');
// call the debounced function when a key is released
searchInput.addEventListener('keyup', debouncedKeyPress);

去抖动示例说明

首先，我们在 debounce 函数中定义一个超时变量（第 3 行）。由于关闭，此变量将可由返回的函数访问。

第 5 行取消先前建立的超时，以便计时器重新开始。

第 6 行开始一个新的超时时间，并在指定的毫秒数后调用回调函数 queryGoogle()。

结果是一个函数，作为我们主要函数的过滤器，可以消除不必要的反弹。

第二个函数 queryGoogle() 是一个异步函数，负责从 Google API 检索搜索数据。

在函数内部，我们发出一个 fetch 请求并将响应解析为 JSON。此时，结果已准备好进行处理。

滚动、按键和鼠标移动等重复触发的事件有可能对浏览器性能产生负面影响——尤其是当你的 JavaScript 代码完成繁重的任务时。

使用 debounce 函数来限制函数执行的速率，以提高程序的响应能力。

最后，感谢你的时间，编程愉快！

学习更多技能

请点击下方公众号