Lodash中Debounce仅执行一次或完全不执行的问题解决

你当前的写法每次触发onkeyup/oninput事件时，都会创建一个全新的Lodash防抖函数实例，而非复用同一个实例。这导致每次按键都是独立的防抖逻辑，无法累积跟踪输入间隔，自然达不到预期效果：

• onkeyup仅执行一次是因为第一个防抖实例触发后，后续的新实例还没到延迟时间就被下一个新实例覆盖；
• oninput一次都不执行是因为输入事件触发频率更高，新的防抖实例不断创建，旧的还没到执行时机就被废弃。

核心是提前创建并复用同一个防抖函数实例，以下两种实现方式：

方式1：内联事件调用预定义的防抖实例 #

先在JS中创建防抖函数并保存，再在HTML事件中调用这个实例：

// 提前创建防抖函数实例，复用这个实例
const debouncedDoIt = _.debounce(doIt, 1000);

function doIt() {
  console.log('done');
}

<input onkeyup="debouncedDoIt();" type="text" value="" />

方式2：事件监听绑定（推荐，分离HTML与JS逻辑） #

用JS事件监听绑定防抖函数，避免内联事件的耦合问题：

<input id="inputBox" type="text" value="" />

function doIt() {
  console.log('done');
}

// 创建防抖实例并绑定到事件
const debouncedDoIt = _.debounce(doIt, 1000);
document.getElementById('inputBox').addEventListener('keyup', debouncedDoIt);

Lodash的_.debounce返回的是一个带有内部状态的函数，只有复用这个返回的函数，它才能正确跟踪事件触发的时间间隔，实现“持续输入时重置延迟，停止输入后1秒执行一次”的预期效果。

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