【2022-11-03】js定时器数值递增

最新推荐文章于 2024-08-22 15:57:56 发布

原创最新推荐文章于 2024-08-22 15:57:56 发布 · 578 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript

基础专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用React实现的简单计时组件，通过useState和useEffect实现了自动递增的效果，并设置了百分比达到100后的停止机制。

这里写自定义目录标题

const [percent, setPercent] = useState(0);

  useEffect(() => {
    let timeId = null;
    const run = () => {
      if (percent == 100) {
        return () => {
          timeId && clearTimeout(timeId)
        }
      }
      setPercent(percent + 20);
      timeId = setTimeout(run, 1000)
    };
    timeId = setTimeout(run, 1000)
    return () => {
      timeId && clearTimeout(timeId)
    }
  }, [percent])