Событие Execute начинается позже каждый раз, когда выполняется - PullRequest
Новая
       6

Событие Execute начинается позже каждый раз, когда выполняется

0 голосов
/ 29 марта 2019

У меня есть несколько кнопок, каждая из которых запускает событие onClick.
Мой проект разработан в React.

Когда я запускаю событие onClick несколько раз, оно замедляет начало события при каждом его запуске. Когда он начинает замедляться, я вижу, что каждый раз, когда событие onClick выполняется дважды.

У кого-нибудь есть идея, почему это происходит? Я думаю, это было из-за функции setTimeout, но без setTimeout все еще замедляется.

Вот работающий пример: 

const Button = props => {
  return (
    <button onClick={props.onClickHandler}>{props.text}</button>
  );
}

const Box = props => {
  function closeBox(e) {
    setTimeout(() => (
      props.onClose()
    ), 400);
  }

  return (
    <div onClick={(e) => closeBox(e)}>{props.text}</div>
  );
}

const Main = () => {
  const [event1, setEvent1] = React.useState(false);
  const [event2, setEvent2] = React.useState(false);
  const [event3, setEvent3] = React.useState(false);

  return (
    <React.Fragment>
      <Button text="Event 1" onClickHandler={() => setEvent1(true)} />
      <Button text="Event 2" onClickHandler={() => setEvent2(true)} />
      <Button text="Event 3" onClickHandler={() => setEvent3(true)} />
      {event1 &&
        <Box text="Box 1" onClose={() => setEvent1(false)} />
      }
      {event2 &&
        <Box text="Box 2" onClose={() => setEvent2(false)} />
      }
      {event3 &&
        <Box text="Box 3" onClose={() => setEvent3(false)} />
      }
    </React.Fragment>
  );
}

ReactDOM.render(<Main />, document.getElementById("root"));
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
...