(reactjs) useEffect 没有在后台 运行

Question

我是 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>
  );
};

Answer 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