JavaScript 事件防抖

最新推荐文章于 2024-08-09 00:05:00 发布

前端码趣逗士

最新推荐文章于 2024-08-09 00:05:00 发布

阅读量347

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_54829066/article/details/128415764

事件防抖是JavaScript中一种有效的优化技术，用于降低事件处理的频率。它通过设置延迟执行的定时器，在延迟时间内若无连续触发，则执行回调。例如，在用户输入时，可以使用事件防抖减少频繁的服务器请求，提高应用性能。以下是一个简单的事件防抖函数示例，用于输入事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 事件防抖是一种常见的事件处理技术，它可以帮助你减少事件响应频率。它的原理是在事件发生后，设置一个延迟执行的定时器，如果在延迟时间内再次触发事件，则重新计时。在延迟时间结束之前，如果没有再次触发事件，则执行回调函数。

这样做的好处是，如果事件触发频率很高，可以避免每次都执行回调函数，从而减少不必要的操作。这在用户输入时比较有用，例如，当用户在输入框中输入文本时，可以使用事件防抖来减少对服务器的请求频率。

下面是一个简单的事件防抖函数的例子：

function debounce(fn, delay) {
  let timer = null;
  return function() {
    const context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
}

// 使用方法
const input = document.getElementById('input');
input.addEventListener('input', debounce(sendRequest, 500));

在这个例子中，当用户在输入框中输入文本时，会触发 input 事件，该事件的回调函数为 debounce 函数返回的匿名函数。