Underscore.js _.debounce()多次触发问题及单次执行方案咨询

嘿，这个问题我之前也踩过坑！核心问题是你没有复用同一个防抖函数实例，而是每次触发输入事件时都重新创建了一个新的debounce函数，导致防抖完全没生效。

先看你可能写错的代码（错误示例） #

大概率你是这么写的：

document.querySelector('#searchInput').addEventListener('input', function() {
  // 每次输入都新建一个debounce函数，相当于白忙活
  _.debounce(() => {
    console.log('发起AJAX请求');
  }, 1000)();
});

这种写法的问题在于：每次输入字符触发input事件时，都会调用_.debounce()生成一个全新的防抖函数，然后立刻执行它。每个新生成的防抖函数都是独立的，自然会在1秒后各自执行一次，就出现了"每输入一个字符就显示一条消息"的情况。

正确的写法（复用防抖实例） #

你需要提前定义好防抖后的函数，然后在事件监听里直接调用这个预先创建好的实例：

// 提前创建防抖函数实例，整个页面生命周期只创建一次
const debouncedFetchData = _.debounce(() => {
  console.log('发起AJAX请求');
  // 这里写你的AJAX请求逻辑，比如axios.get(...)或者fetch(...)
}, 1000);

// 输入事件触发时，调用同一个防抖函数实例
document.querySelector('#searchInput').addEventListener('input', function() {
  debouncedFetchData();
});

这样每次输入字符时，调用的都是同一个防抖函数实例，它会自动重置延迟计时器——只有当用户停止输入满1秒后，才会执行一次目标函数，完美实现你要的效果。

补充：Underscore debounce的可选参数 #

如果你有特殊需求，可以调整第三个参数（配置对象）：

• { leading: true }：第一次触发事件时立即执行目标函数，之后才会防抖（适合需要即时反馈的场景）
• { trailing: false }：取消延迟结束后的执行（一般很少用）
  你的场景用默认配置就够了（默认leading: false, trailing: true），也就是停止输入后执行一次。

内容的提问来源于stack exchange，提问作者Jon