Question

我正在尝试缓冲用户输入，一旦用户在1秒钟内未按任何键，我打算执行sendRequest()。但这是行不通的。取而代之的是，每当用户按下任何键时，它就会调用sendRequest()。

我感谢任何评论/可能的修复。

import React from 'react';
import throttle from 'lodash/throttle';

const ELAPSED_TIME = 1000;    

const App = ({ setInputTerm, ...props }) => {
  const onHandleQueryChange = (e) => {
    setInputTerm(e.target.value);
    throttledSendRequest();  
  };

  function sendRequest() {
    console.log('hey you');
  }

  const throttledSendRequest = throttle(sendRequest, ELAPSED_TIME);

  return (
    <div>
      <input onChange={onHandleQueryChange} type="text"></input>
    </div>  
  );
}

export default App;

Answer 1

您想要debounce：

创建一个防反跳函数，该函数将调用func延迟到自上次调用防反跳函数以来经过了等待的毫秒数之后。防反跳功能带有用来取消延迟的函数调用的cancel方法和用于立即调用它们的flush方法。提供选项以指示是否应在等待超时的前沿和/或后沿调用func。将使用提供给去抖动功能的最后一个参数来调用func。随后对反跳功能的调用将返回上一次func调用的结果。

import React from 'react';
import debounce from 'lodash/debounce';

const ELAPSED_TIME = 1000;    

const App = ({ setInputTerm, ...props }) => {
  const onHandleQueryChange = (e) => {
    setInputTerm(e.target.value);
    throttledSendRequest();  
  };

  function sendRequest() {
    console.log('hey you');
  }

  const throttledSendRequest = debounce(sendRequest, ELAPSED_TIME);

  return (
    <div>
      <input onChange={onHandleQueryChange} type="text"></input>
    </div>  
  );
}

export default App;

限制哑组件中的React事件处理程序

1 个答案: