javascript - 对 lodash/debounce 中的第一个函数调用进行去抖处理

Question

我正在寻找的东西非常简单，但我已经坚持了一段时间了:
我一直在使用lodash的去抖功能，以实现键入时搜索功能。
基本上，当您在搜索栏中输入内容时，网站将在最后一次键盘输入后等待 500 毫秒，然后才会触发搜索。

问题是，第一个调用不会去抖，因为去抖将等待第二次调用以引入延迟。

现在我已经使用选项 { Trailing: true,leading: false } 配置了它，但我不知道如何配置它以实现第一个要消除抖动的函数调用。

const DebouncedSearchBox = ({ currentRefinement, refine }) => {
  const debouncedSearch = debounce(
    e => {
      refine(e.target.value);
      if (!e.target.value.length) {
        document.getElementsByClassName("ais-Pagination-list")
          ? Array.from(
              document.getElementsByClassName("ais-Pagination-list")
            ).forEach(function(element) {
              element.classList.add("hidden");
            })
          : null;
        document.getElementsByClassName("ais-Stats-text")
          ? Array.from(
              document.getElementsByClassName("ais-Stats-text")
            ).forEach(function(element) {
              element.classList.add("hidden");
            })
          : null;
      } else {
        document.getElementsByClassName("ais-Pagination-list")
          ? Array.from(
              document.getElementsByClassName("ais-Pagination-list")
            ).forEach(function(element) {
              element.classList.remove("hidden");
            })
          : null;
        document.getElementsByClassName("ais-Stats-text")
          ? Array.from(
              document.getElementsByClassName("ais-Stats-text")
            ).forEach(function(element) {
              element.classList.remove("hidden");
            })
          : null;
      }
      document.getElementsByClassName("search_results")
        ? Array.from(
            document.getElementsByClassName("search_results")
          ).forEach(function(element) {
            element.classList.remove("loading");
          })
        : null;
    },
    500,
    { trailing: true, leading: false }
  );

  const onChange = e => {
    e.persist();
    console.log("on change" + e.target.value);
    document.getElementsByClassName("search_results")
      ? Array.from(
          document.getElementsByClassName("search_results")
        ).forEach(function(element) {
          element.classList.add("loading");
        })
      : null;
    debouncedSearch(e);
  };

  return (
    <input
      defaultValue={currentRefinement}
      onChange={onChange}
      aria-label="recherche"
      className="ais-SearchBox-input"
      autoFocus
      onFocus={e => {
        let val = e.target.value;
        e.target.value = "";
        e.target.value = val;
      }}
    />
  );
};

Answer 1

对于独立的去抖动函数，您可以为立即 bool 值添加第三个参数，以验证该函数是否应在前沿立即执行，然后等待。

例如:

/**
* debounce
* @type {Function}
*
* @param {Function} cb
* @param {Number} wait
* @param {Boolean} immediate
*
* @return {Function} debounced function
*/

const debounce = (cb, wait, immediate) => {
  let timeoutId;

  return () => {
    const context = this;
    const args = arguments;

    if (immediate) {
      cb();
    }

    clearTimeout(timeoutId);

    timeoutId = setTimeout(() => cb.apply(context, args), wait);
  }
}

对于您当前的实现，也许将 {leading: false} 标志切换为 true 应该可以触发前沿。