javascript ReactJS：如何重置计时器？

6vl6ewon 于 2023-09-29 发布在 Java

关注(0)|答案(2)|浏览(141)

我正试图让我的网络应用程序显示一个消息的时间设置每当按钮被按下，并为所述计时器重置每当按钮被按下之前的时间已经过去了。我甚至觉得问这个问题很愚蠢，但是我如何使启动计时器的按钮在再次单击按钮时也重置它呢？下面是我目前的代码：

import { useState, useEffect } from "react";

export default function App() {
  const [revealed, isRevealed] = useState(false);
  const [time, setTime] = useState(0);

  useEffect(() => {
    let timer;
    if (revealed) {
      clearTimeout(timer);
      setTime(2500);
      timer = setTimeout(() => isRevealed(false), time);
    }
  }, [revealed]);

  return (
    <div>
      <button onClick={() => isRevealed(true)}>Start!</button>
      {revealed ? (
        <p>
          This should stay showing up if you keep clicking on the "Start!"
          button.
        </p>
      ) : null}
    </div>
  );
}

下面是我的代码的CodeSandbox演示：https://codesandbox.io/s/frosty-worker-g9l986?file=/src/App.js

JavaScript

来源：https://stackoverflow.com/questions/77198483/reactjs-how-do-you-reset-a-timer

2条答案

按热度按时间

lp0sw83n1#

你设置revealed*“true”* 当按钮被点击时，当revealed**为true时，点击按钮不做任何事情。我建议的解决方案是，设置状态的方式是每次点击按钮都可以改变它。例如使用点击的时间按钮。要清除超时，应该使用useEffect return。
import { useState，useEffect } from“react”;

export default function App() {

  const [time, setTime] = useState();
  const [revealed, isRevealed] = useState(false);
  const delayTime = 2500;

  useEffect(() => {
    
    let timer;
    if (time) {
      isRevealed(true);
      timer = setTimeout(() => isRevealed(false), delayTime);
    }
    return(
      () => { clearTimeout(timer)}
    )
  }, [time,delayTime]);

  return (
    <div>
      <button onClick={() => setTime(Date.now())}>Start!</button>
      {revealed ? (
        <p>
          This should stay showing up if you keep clicking on the "Start!"
          button.
        </p>
      ) : null}
    </div>
  );
}

赞(0）回复(0）举报 2023-09-29

ygya80vv2#

简短回答：clearTimeout()https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout
长回答：
将timer移动到全局作用域，这样就可以用来清除超时并重新使用它。
另外，超时的触发应该在onClick处理程序中，而不是在useEffect中。所以按钮应该是

<button
        onClick={() => {
          isRevealed(true);
          clearTimeout(timer);
          timer = setTimeout(() => isRevealed(false), time);
        }}
      >
        Start!
      </button>

看你的代码在行动：https://codesandbox.io/s/dazzling-almeida-xpm449?file=/src/App.js

赞(0）回复(0）举报 2023-09-29

我来回答

javascript ReactJS：如何重置计时器？

2条答案

相关问题

热门标签

最新问答