在 JavaScript 开发中，防抖（Debouncing）是一种非常实用的技术，用于确保函数不会被过于频繁地调用。我们通常会在事件被快速触发的场景中使用它，比如在输入框中打字或调整窗口大小时。如果没有防抖，函数可能会在短时间内连续执行多次，从而导致性能问题或产生非预期的行为。
什么是 JavaScript 中的防抖？
JavaScript 中的防抖可以被定义为一种用于限制函数执行次数的技术。当事件在短时间内频繁触发（例如打字、滚动和调整窗口大小）时，防抖显得非常有用。
- 限制函数调用： 在像打字、调整大小或滚动这样频繁发生的事件中，防抖可以阻止函数被频繁调用。
- 延迟执行： 只有在经过指定的延迟时间后，函数才会执行，从而确保不会发生快速连续的调用。
- 防止过载： 高效地管理高频触发事件有助于防止系统过载。
JavaScript
CODEBLOCK_448a7b84
Output
Searching for: Hello, World!
在这个例子中
- debounce() 函数： 这是一个高阶函数，它接收延迟时间（delay）和目标函数作为参数。它返回一个新的函数，该函数会在调用原始函数之前等待指定的延迟时间。
- clearTimeout()： 用于清除任何之前设置的定时器，这样如果事件被重复触发，函数调用就不会发生得太快。
- setTimeout()： 此方法用于在清除之前的定时器后重新设置超时时间。
- Search 搜索函数： 它是我们想要进行防抖处理的目标函数的占位符。
防抖是如何工作的？
在 JavaScript 中，防抖函数在事件触发时开始工作。防抖机制会等待一段特定的时间来运行函数，而不是立即运行它。如果在等待时间结束之前事件再次被触发，那么之前的函数调用将被取消，并且计时器会重置。只有当计时器完成且没有进一步的事件触发时，函数才会被执行。这确保了函数只有在事件停止发生一段时间后才会执行。
JavaScript 中防抖的使用场景
下面列出了 JavaScript 中防抖的一些主要应用场景：
- 搜索输入框： 在搜索栏中，用户会一个接一个地输入字符，这会为每次按键都触发一个 API 请求。防抖可以确保只有在用户完成输入后才发送 API 请求。
let timer;
document.getElementById("searchInput").addEventListener("input", () => {
clearTimeout(timer);
timer = setTimeout(() => console.log("Searching..."), 300);
});
- 窗口大小调整： 当我们调整浏览器窗口大小时，在很短的时间间隔内，调整大小事件会被触发多次。我们可以使用防抖来处理这个事件。
let timer;
window.addEventListener("resize", () => {
clearTimeout(timer);
timer = setTimeout(() => console.log("Window resized"), 500);
});
- 滚动事件： 当用户滚动网页时，滚动事件每秒会被触发多次。通过对滚动事件进行防抖，只有在用户停止滚动特定时间后，滚动处理函数才会被执行。
let timer;
window.addEventListener("scroll", () => {
clearTimeout(timer);
timer = setTimeout(() => console.log("Scrolling stopped"), 300);
});
- 表单验证： 如果我们在用户输入时实时验证表单，可以使用防抖来确保验证函数不会因为每次击键而被反复触发。
let timer;
document.getElementById("formInput").addEventListener("input", () => {
clearTimeout(timer);
timer = setTimeout(() => console.log("Validating..."), 500);
});
防抖的优势
- 提升性能： 防抖有助于优化性能，特别是当我们处理像打字这样频繁的事件时，它减少了函数执行的次数。这减少了不必要的资源消耗。
- 更好的用户体验： 即使事件被快速触发，通过防抖应用程序也能保持响应。