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

对于独立的debouncing函数，您可以为立即布尔值添加第3个参数，以验证该函数应在前沿立即执行，然后等待。

例如：

/**
* 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应该可以触发触发前沿。

消除lodash / debounce中的第一个函数调用

1 个答案: