如何设置Lodash的debounce方法仅对回车键不生效、跳过延时

需求可行性 #

该需求完全可实现，无需替换现有Lodash依赖，也不需要额外引入第三方工具库，以下是3种低改造成本的实现方案：

方案1：事件触发层分流（改造成本最低，无侵入） #

该方案不需要改动现有防抖逻辑，仅需要将业务逻辑抽离为公共函数，在事件触发层做按键判断分流：

// 1. 抽离公共搜索业务逻辑
const handleSearch = (event) => {
  // 原有业务代码
}

// 2. 保留原有防抖逻辑，仅给非回车按键使用
const debouncedSearch = _.debounce(handleSearch, 5)

// 3. 替换原有的防抖事件监听函数
search_products: function(event) {
  // 按下回车键时直接执行
  if (event.key === 'Enter' || event.keyCode === 13) {
    // 清空防抖队列中待执行的任务，避免普通输入后按回车出现重复请求
    debouncedSearch.cancel()
    handleSearch(event)
    return
  }
  // 其余按键走原有防抖逻辑
  debouncedSearch(event)
}

该方案优势是完全保留Lodash防抖的所有原有能力，不需要修改底层逻辑，适配性最高。

方案2：自定义支持例外规则的防抖函数 #

如果需要多处复用该「指定场景跳过防抖」的能力，可以自己实现一个简易的防抖扩展函数：

/**
 * 支持例外判断的防抖函数
 * @param {Function} fn 要执行的方法
 * @param {Number} delay 防抖延迟时间
 * @param {Function} exceptionCheck 例外判断函数，返回true时直接执行不防抖
 */
function debounceWithException(fn, delay, exceptionCheck) {
  let timer = null
  return function(...args) {
    // 符合例外条件时直接执行
    if (typeof exceptionCheck === 'function' && exceptionCheck(...args)) {
      clearTimeout(timer)
      timer = null
      return fn.apply(this, args)
    }
    // 不符合例外条件走普通防抖逻辑
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

// 使用示例
search_products: debounceWithException(function(event) {
  // 业务代码
}, 5, (event) => event.key === 'Enter')

方案3：基于Lodash debounce封装通用扩展 #

如果不想自行实现防抖的基础逻辑，也可以对Lodash的debounce做一层通用包装，复用Lodash已有的防抖能力：

function wrapDebounceWithException(debouncedFn, rawFn, exceptionCheck) {
  return function(...args) {
    if (exceptionCheck?.(...args)) {
      debouncedFn.cancel()
      return rawFn.apply(this, args)
    }
    return debouncedFn.apply(this, args)
  }
}

// 使用示例
const handleSearch = (event) => { /* 业务代码 */ }
const debouncedSearch = _.debounce(handleSearch, 5)
search_products: wrapDebounceWithException(debouncedSearch, handleSearch, (e) => e.key === 'Enter')

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