(reactjs) useEffect 没有在后台运行

Posted 2023-03-17

【中文标题】(reactjs) useEffect 没有在后台运行

【英文标题】：(reactjs) useEffect didn't run in background

【发布时间】：2021-12-02 18:32:09

【问题描述】：

我是 reactjs 新手，正在尝试制作这个简单的秒表。这段代码在我的浏览器中工作，但是当我最小化浏览器时暂停的时间，只有当我打开浏览器时才继续，你有没有发现我必须错过的东西？提前致谢！

import  useState, useEffect  from "react";

export const SW = () => 
  const [mSec, setMSec] = useState(0);
  const [sec, setSec] = useState(0);
  const [min, setMin] = useState(0);
  const [isOn, setIsOn] = useState(false);
  const start = () => setIsOn(true);
  const stop = () => setIsOn(false);
  const reset = () => 
    setIsOn(false);
    setMin(0);
    setSec(0);
    setMSec(0);
  ;

  useEffect(() => 
    let ms;
    if (isOn) 
      ms = setInterval(() => setMSec((mSec) => mSec + 1), 10);
      if (sec === 59) 
        setSec(0);
        setMin((min) => min + 1);
      
      if (mSec === 99) 
        setMSec(0);
        setSec((sec) => sec + 1);
      
    
    return () => 
      clearInterval(ms);
    ;
  , [mSec, sec, isOn]);

  return (
    <div>
      <p>
        min.toString().padStart(2, "0"):sec.toString().padStart(2, "0"):
        mSec.toString().padStart(2, "0")
      </p>
      !isOn && <button onClick=start>!mSec ? "start" : "resume"</button>
      isOn && <button onClick=stop>stop</button>
      <button disabled=!mSec onClick=reset>
        reset
      </button>
    </div>
  );
;

【参考方案1】：

这不是useEffect 或您的代码的问题，只是浏览器的工作方式，它们在活动选项卡上执行 javascript。

解决方法是使用Web Workers API在后台执行JavaScript。

更多详情：

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

https://www.w3schools.com/html/html5_webworkers.asp