Hyperapp 中输入元素输入事件的去抖动作

Question

我正在尝试去抖动（使用 lodash.debounce）当用户在搜索字段中输入时 Hyperapp 组件中的操作。虽然操作被延迟，但它们似乎已排队，并且会在间隔（500 毫秒）过去后单独执行，而不是完全跳过。

换句话说：如果用户在 500 毫秒内键入 "foo"，它将执行三次，每个函数调用延迟 500 毫秒，而不是只执行一次。

我在非 Hyperapp 上下文中多次使用 debounce，所以感觉我在 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 中输入元素输入事件的去抖动作

Debounced action on input element's input event in Hyperapp

javascript

hyperapp