使用功能的行为当不同的浏览器选项卡处于活动状态时会生效

如何解决使用功能的行为当不同的浏览器选项卡处于活动状态时会生效

我有一个奇怪的问题。 我创建了一个旨在在60秒后重置Linearprogress元素的函数。

useEffect(() => {

    const interval2 = setInterval(() => {

        var internal = timer

        if( internal < 100 ) {internal = (internal - (1.695 * -1 )) } else {internal = internal - 100}

       setTimer(internal)
       
     
    

    },1000)
    return () => clearInterval(interval2)
  },[timer])

然后，我绘制了一个线性进度元素，如下所示：

return (
    <div>
  
        <LinearProgress
         color ="secondary"
          value={timer}
          variant="determinate"
        />
      
    </div>
  );

现在很奇怪的部分：当我看着我的应用程序看起来都正常时，60秒后，该栏会重置为开始并重复该操作。但是，当我在重置后立即更改浏览器中的活动标签并在55秒后返回时（该条应在末尾附近），该条在中间。

当带有应用程序的选项卡处于非活动状态时，useeffect似乎并没有像应该那样频繁地重新执行该功能。

我在这里想念什么。

CODE SANDBOX（复制有问题的地方）：https://codesandbox.io/s/young-brook-mttpz?file=/src/App.js:205-206

谢谢

解决方法

由于setInterval，导致内存泄漏。 每1000毫秒，它将重新运行一次，但同时，您的useEffect也由setTimer(internal);触发。因此，您有越来越多的setInterval运行。

一种解决方案是在更新clearInterval(interval2);之前添加Timer。

但是从概念上讲，这并不完美，因为我们使用间隔作为超时，因此您可以将setInterval替换为setTimeout，而将返回的clearInterval替换为{{1} }，而无需进行其他任何修改。

这是经过修改的sandbox代码的工作版本：

clearTimeout

如here所述，浏览器将较少的资源分配给没有重点的标签，因此计时器可能是错误的。因此，给出的解决方案之一是使用组件首次渲染时初始化的计时器。然后，您可以使用Date.now（）与您的第一个渲染时间之间的差来获得间隔（取模100）（sandbox）。

import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/styles";
import { LinearProgress } from "@material-ui/core";
import { useEffect } from "react";

const TotalProfit = (props) => {
  const [timer,setTimer] = React.useState(0);

  useEffect(() => {
    const interval2 = setTimeout(() => {
      var internal = timer;

      if (internal < 100) {
        internal = internal - 1.695 * -1;
      } else {
        internal = internal - 100;
      }

      setTimer(internal);
    },1000);
    return () => clearTimeout(interval2);
  },[timer]);

  return (
    <div>
      <div>{timer}</div>
      <LinearProgress color="secondary" value={timer} variant="determinate" />
    </div>
  );
};

TotalProfit.propTypes = {
  className: PropTypes.string
};

export default TotalProfit;

否则，如果您的目标只是拥有一个加载器，则可以使用所示的css动画（略作修改以获取与js相同的呈现效果）here：

import React,{ useEffect,useState } from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/styles";
import { LinearProgress } from "@material-ui/core";

const TotalProfit = (props) => {
  const [timer] = useState(Date.now()/1000);
  const [delta,setDelta] = useState(0);

  useEffect(() => {
    const interval2 = setInterval(() => {
      setDelta((Date.now()/1000 - timer) % 100);
    },1000);
    return () => clearInterval(interval2);
  },[timer]);

  return (
    <div>
      <div>{delta}</div>
      <LinearProgress color="secondary" value={delta} variant="determinate" />
    </div>
  );
};

TotalProfit.propTypes = {
  className: PropTypes.string
};

export default TotalProfit;

body {margin: 0; padding: 0;}
@keyframes loader-animation {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
    left: 0%
  }
}
.loader {
  height: 5px;
  width: 100%;
}
.loader .bar {
  position: absolute;
  height: 5px;
  background-color: dodgerblue;
  animation-name: loader-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}