当我切换标签时我的计数器停止（reactjs）

Question

我是新手javascript，做了一个计数器。它起作用，但是当标签不活动时，它会停止，然后当我return到页面时恢复。这是我的代码：

import React, { useEffect, useState } from 'react'

function TimeTracker(props){

    const [time, setTime] = useState(0);
    const [timerOn, setTimerOn] = useState(false);

useEffect(()=>{

        let interval = null;

        if(timerOn){
            interval = setInterval(()=>{
                setTime(prevTime => prevTime +10)
            }, 10)

        }else{
            clearInterval(interval)

        }

        return ()=> clearInterval(interval)

    },[timerOn])
    
    return(
    <div>
    
     <p>{("0" + Math.floor((time / 60000) % 60)).slice(-2)} mn</p>
     <p>{("0" + Math.floor((time / 1000) % 60)).slice(-2)} s</p>
     <button onClick={()=>setTimerOn(true)}>Start</button>
     <button onClick={()=>setTimerOn(false)}>Stop</button>


    
    </div>
    
    
    )
}

提前感谢您能给我的任何帮助。

Answer 1

On most browsers inactive tabs have low priority execution and this can affect JavaScript timers.

因此，当您不专注于标签时，间隔将不起作用。这不是 React 问题。

查看this问题，希望对您有所帮助

Answer 2

您的计数器效率不高

如果在 setTime 之前添加 console.log 并启动计数器，您会注意到额外的渲染

下面的代码将解决您的问题：

import React, { useEffect, useState } from 'react'

function TimeTracker(props){

const [time, setTime] = useState(0);
const [timerOn, setTimerOn] = useState(false);

useEffect(()=>{

  let interval = null;
  if(timerOn){
      interval = setInterval(()=>{
          setTime(prevTime => prevTime +1)
      }, 1000)

  }else{
      clearInterval(interval)

  }

  return ()=> clearInterval(interval)

},[timerOn])

return(
<div>

 <p>0{Math.floor(time / 60)} mn</p>
 <p>{Math.floor(time % 60)} s</p>
 <button onClick={()=>setTimerOn(true)}>Start</button>
 <button onClick={()=>setTimerOn(false)}>Stop</button>



</div>


)
}

当我切换标签时我的计数器停止（reactjs）

My counter stop when i switch tab (reactjs)

javascript

reactjs

react-hooks