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

Question

当用户在搜索字段中输入时，我正在尝试(使用lodash.debounce)在Hyperapp组件中删除一个操作。虽然动作是延迟的，但它们似乎都是排队的，并且在间隔(500 ms)过去时都会单独执行，而不是完全跳过。

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

我在非Hyperapp环境中使用了很多次，所以感觉好像我错过了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);
      }
    } />
);