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

Question

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

换句话说：如果用户在 500 毫秒内键入“foo”，它将执行 3 次，每个单独的函数调用延迟 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);
      }
    } />
);