(反应)useEffect没有在后台运行 [英] (reactjs) useEffect didn't run in background

问题描述

我刚接触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>
  );
};

推荐答案

这不是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

这篇关于(反应)useEffect没有在后台运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！