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

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

Janfiveee_

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

阅读量553

点赞数

CC 4.0 BY-SA版权

分类专栏：基础文章标签： react.js javascript

本文链接：https://blog.youkuaiyun.com/Janfiveee_/article/details/127672340

基础专栏收录该内容

14 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写自定义目录标题

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])