如何使用 Lodash 取消内部函数的去抖动？

问题描述

我正在实施一项功能，允许用户输入以进行自动搜索。它现在工作正常。

为了改进这个功能，我想支持用户按下回车键，然后必须立即调用搜索Ajax请求。

我已经阅读了 Lodash 文档。它说我可以打电话给debounced.flush。暂时可以。将方法分配给变量。

  const debounced = _.debounce((event) => {
    // Call ajax request and sth more here)
  },700);

  $('input').unbind('keyup keypress').on('keyup keypress',debounced);

为了检查“Enter”按钮是否被按下，我需要检查 event.keyCode || event.which 并在 debounce 函数定义中调用 flush 方法。

  const debounced = _.debounce((event) => {
    if (13 === (event.keyCode || event.which)) return debounced.flush();

    // Call ajax request and sth more here)
  },700);

但是好像请求还是有延迟，没有被调用。

解决方法

由于 debounced 会在最后一次调用后仅 700 毫秒调用回调函数，因此 enter 检查也会在您按下 Enter 键后仅 700 毫秒应用。

创建一个调用 debounced 的事件处理程序，并在按下 Enter 时刷新它。

const debounced = _.debounce(value => {
  console.log(value);
},700);

const eventHandler = e => {
  if (e.key === 'Enter') return debounced.flush();
  
  debounced(e.target.value);
}

$('input').on('keyup keypress',eventHandler);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<input>

debounce javascript jquery lodash lodash