为什么 clearInterval 和 clearTimeout 会使自增变慢？

Question

它运行良好，因为当通过迭代达到特定限制时我能够停止。

但是我想知道为什么当我试图延迟 setInterval 的执行时间时，progressBar 的增量变得更慢了。

增加 setInterval 或 setTimeout 的延迟时间会影响速度变慢。

我想要的是将执行延迟 5 秒，增量速度为每秒 1。

    const [progressBar, setProgressBar] = React.useState(0);
    let timeout;
    let interval;
    React.useEffect(
        () => {
            timeout = setTimeout(() =>{
                if(progressBar === 100){
                    return clearTimeout(timeout);
                } else{
                    interval = setInterval(() =>{
                       if(progressBar === 100){
                            clearInterval(interval);
                       } else{
                        setProgressBar(prev_value => prev_value + 1);
                       }
                    },10);
                }
            }, 10);
            return () => {
                clearTimeout(timeout);
                clearInterval(interval);
                
            };
    }, [progressBar]);

    let divStyle = {
      backgroundColor: "green",
      width: "100px",
      maxWidth: `${progressBar}px`,
      border: "1px solid red"
    }

JSX

<div className='progress-bar' style={divStyle}>{progressBar}</div>

Answer 1

我认为你使用了钩子错误，如果你在反应中使用 setState，那将在反应世界中再次执行 function。

所以你的间隔总是运行 1 次，因为你在销毁回调中破坏了它，

一旦你 setState 将根据你的useEffect deps 触发，

我认为你应该那样写。 不需要任何部门，只有在该值成为您想要的值时才清除该间隔。

也许这会有所帮助。 https://stackblitz.com/edit/react-ts-any9su?file=App.tsx