Question

当用户在搜索字段中键入内容时，我试图消除（使用lodash.debounce）Hyperapp组件中的操作。当操作被延迟时，它们似乎已排队，并且将在间隔（500 ms）过去时单独执行，而不是完全跳过。

换句话说：如果用户在500毫秒内键入“ foo”，它将执行3次，每个单独的函数调用将延迟500毫秒，而不是仅执行一次。

我在非Hyperperapp上下文中使用了很多次去抖动功能，因此感觉好像我在Hyperapp的工作方式中缺少一些东西。

export default ({ state, actions }) => {
  const debouncedFetchResults = debounce(actions.fetchResults, 500);

  return (
    <input
      type="search"
      name="search"
      value={state.searchPhrase}
      oninput={
        (e) => {
          // Set `state.searchPhrase`
          actions.setSearchPhrase(e.target.value);

          // Search using `state.searchPhrase`
          debouncedFetchResults();
        }
      } />
  );
};

Answer 1

我最终使用以下方法解决了此问题：

const debouncedFetchResults = debounce(fn => fn(), 500);

export default ({ state, actions }) => (
  <input
    type="search"
    name="search"
    value={state.searchPhrase}
    oninput={
      (e) => {
        // Set `state.searchPhrase`
        actions.setSearchPhrase(e.target.value);

        // Search using `state.searchPhrase`
        debouncedFetchResults(actions.fetchResults);
      }
    } />
);

在Hyperapp中对输入元素的输入事件执行反跳操作

1 个答案: