Execute事件在其每次执行后开始

时间:2019-03-29 11:03:29

标签: javascript reactjs settimeout

我有多个按钮,每个按钮都会触发include("./code.jl") @everywhere include("./code.jl") 事件。
我的项目是在React中开发的。

当我多次触发onClick事件时,每次触发它都会减慢事件的开始速度。 当它开始变慢时,我会看到每次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"));

0 个答案:

没有答案