前端的防抖实现，厉害！

最新推荐文章于 2025-05-12 07:29:18 发布

众乐乐_2008

最新推荐文章于 2025-05-12 07:29:18 发布

阅读量147

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/liuruiaaa/article/details/132104376

VUE 专栏收录该内容

26 篇文章

订阅专栏

上代码：

function debounce(fn, delay) {
  let timeout = null;

  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

function sayHi() {
  console.log('防抖成功');
}

var inp = document.getElementById('inp');
var debounceSayHi = debounce(sayHi, 500); // 在外部创建防抖函数
inp.addEventListener('input', debounceSayHi);

在上面的代码中，我们在外部创建了一个防抖函数 debounceSayHi，并将其作为事件监听函数传递给 addEventListener。这样，每次调用 debounceSayHi 时都会共享同一个闭包中的 timeout 变量，保证了防抖效果的正确执行。

现在，timeout 变量在闭包中被正确地维护，当用户连续输入时，前一个 timeout 会被清除，只有在用户输入结束后的 500 毫秒内没有再次输入，才会执行 sayHi 函数。