debounce первый вызов функции в lodash / debounce - PullRequest
Новая
       5

debounce первый вызов функции в lodash / debounce

0 голосов
/ 05 ноября 2018

то, что я ищу, довольно просто, но я застрял на нем некоторое время:
Я использовал функцию debounce в lodash, чтобы реализовать функцию поиска по мере ввода.
Как правило, когда вы что-то вводите в строке поиска, веб-сайт будет ждать 500 мс после последнего ввода с клавиатуры, прежде чем запускать поиск.

Дело в том, что самый первый вызов не отменяется, так как debounce будет ожидать второго вызова, чтобы ввести задержку.

Прямо сейчас я настроил его с параметрами { 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;
      }}
    />
  );
};

1 Ответ

0 голосов
/ 05 ноября 2018

Для автономной функции 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 должно сработать, чтобы вызвать передний фронт.

...