Reactjs 如何使用'；具有节流功能的EventHandler'；？

任务： 我们有一个名为makeRequest的函数，它发出API请求。 我们还有一个名为eventHandler的函数，它连接到 一个事件（例如单击），现在它是一个哑处理程序 这只是调用makeRequest

编写一个新的事件处理程序eventHandlerWithThrottling，我们可以钩住它 直到单击事件，这样它就不会调用makeRequest more 而不是每5秒一次。我们不关心API请求返回什么（假设它是一个fire-and-forget-POST）

API请求后5秒内发生的事件将被“记住”， 一旦5秒超时结束，将触发最新的超时

'''

---

“'

简而言之，您只想在5秒后停止渲染此组件？您只想渲染此组件一次，持续5秒，对吗？@NihalChandwani是的，并且“记住API请求后5秒内发生的事件”，一旦5秒超时结束，将触发最新的事件。”，我有通过状态在本地存储中存储数据的想法，就渲染计时器而言，使渲染状态最初为false，并使用setTimOut函数在相应秒后更改状态为true来渲染它。。。。为了更清楚地了解我的意思，我会尽快发布代码。这对我来说有点难理解你的代码，请让我知道你的代码到底是为了什么。。。。。。。您可以用图解的方式清除场景，这将使我们更容易理解

let now = 0;

function makeRequest(payload) {
  // let's pretend this makes a request, and logs the payload/time of request
  console.log({
    data: payload,
    time: Math.round((new Date().getTime() - now) / 1000)
  });
}

const throttle = (callback, delay) => payload => callback(payload);
// const throttledMakeRequest = throttle(makeRequest, 5000);

/*** TESTS (do not edit) **/
{
  // set "now" to the moment when tests started
  now = new Date().getTime();

  // util function for testing
  function simulateEvent(fn, payload, timeOfEvent) {
    setTimeout(function() {
      fn(payload);
    }, timeOfEvent);
  }

  function test(name, timeout, code) {
    setTimeout(() => {
      console.groupEnd();
      console.group(name);
      code();
    }, timeout);
  }

  console.clear();
  // ADDED first case. just one call
  test("test 1: hello", 0, () => {
    const eventHandlerWithThrottling1 = throttle(makeRequest, 50);
    simulateEvent(eventHandlerWithThrottling1, "1. hello", 0); // hello logged at 0
  });

  //  2. 'hello' (t = 0), 'goodbye' (t = 5)
  test("test 2: hello, goodbye", 60, () => {
    const eventHandlerWithThrottling2 = throttle(makeRequest, 50);
    simulateEvent(eventHandlerWithThrottling2, "2. hello", 0); // hello logged at 0
    simulateEvent(eventHandlerWithThrottling2, "2. goodbye", 40); // goodbye logged at 5
  });

  // 3. a (t = 0), 'c' (t = 5), 'd' (t = 10)
  test("test 3: a, c, d", 160, () => {
    const eventHandlerWithThrottling3 = throttle(makeRequest, 50);
    simulateEvent(eventHandlerWithThrottling3, "3. a", 0); // a logged at 0
    simulateEvent(eventHandlerWithThrottling3, "3. b", 20); // ignored
    simulateEvent(eventHandlerWithThrottling3, "3. c", 40); // c logged at 5
    simulateEvent(eventHandlerWithThrottling3, "3. d", 70); // d logged at 10
  });

  // ADDED 4.
  test("test 4: a, c, d, e, f, g", 300, () => {
    const eventHandlerWithThrottling4 = throttle(makeRequest, 50);
    simulateEvent(eventHandlerWithThrottling4, "4. a", 0); // a logged at 0
    simulateEvent(eventHandlerWithThrottling4, "4. b", 20); // ignored
    simulateEvent(eventHandlerWithThrottling4, "4. c", 40); // c logged at 5
    simulateEvent(eventHandlerWithThrottling4, "4. d", 70); // d logged at 10
    simulateEvent(eventHandlerWithThrottling4, "4. e", 200); // e logged at 20. like if it was first call
    simulateEvent(eventHandlerWithThrottling4, "4. f", 220); // f called at 25
    simulateEvent(eventHandlerWithThrottling4, "4. g", 260); // g logged at 30
  });
}