javascript 按住按钮时显示倒计时，然后显示警报

lfapxunr 于 2023-01-16 发布在 Java

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

我正在尝试创建一个按钮，它在保持显示3秒的倒计时，如果保持3秒，它会显示一个警报，但由于某种原因，倒计时没有正确重置，无论如何警报火灾，在每次点击（超时后）
我的密码是：

const [showCountdown, setShowCountdown] = useState(false)
const [holdTimer, setHoldTimer] = useState(3)

var timer = 0, interval;
const refreshDown = () => {
    setShowCountdown(true)
    interval = setInterval(function(){       
        setHoldTimer((t) => t - 1)
    },1000);
    timer = setTimeout(function(){
        if (confirm('Refresh page?')){
            window.location.reload()
        }
    },3000)
}
const refreshUp = () => {
    clearTimeout(timer)
    clearInterval(interval)
    setShowCountdown(false)
    setHoldTimer(3)
}

我的html按钮有这两个：

<svg onMouseDown={() => refreshDown()} onMouseUp={() => refreshUp()}>
  ...
</svg>

JavaScript

来源：https://stackoverflow.com/questions/75011527/show-countdown-when-holding-button-then-show-alert

2条答案

按热度按时间

06odsfpq1#

你试过useRef吗？

const timer = useRef();
  const interval = useRef();
  const refreshDown = () => {
    setShowCountdown(true);
    interval.current = setInterval(function () {
      setHoldTimer((t) => t - 1);
    }, 1000);
    timer.current = setTimeout(function () {
      if (confirm("Refresh page?")) {
        window.location.reload();
      }
    }, 3000);
  };
  const refreshUp = () => {
    clearTimeout(timer.current);
    clearInterval(interval.current);
    setShowCountdown(false);
    setHoldTimer(3);
  };

赞(0）回复(0）举报 2023-01-16

qpgpyjmq2#

每次状态或属性更改时，React组件都会重新呈现。执行setHoldTimer时，它会更改状态。这会导致组件代码的重新执行，因此局部变量“timer”和“interval”会再次声明为值“0”和“undefined”，同时还会创建新的“refreshUp”函数，引用新的“timer”和“interval”。释放鼠标时，会调用新的“refreshUp”。间隔和超时未被清除。
尝试将计时器和间隔定义为一个状态或使用“useRef”。这样在重新渲染时它们就不会被重新定义。

赞(0）回复(0）举报 2023-01-16

我来回答

javascript 按住按钮时显示倒计时，然后显示警报

2条答案

相关问题

热门标签

最新问答