问题描述
我有一个奇怪的问题。 我创建了一个旨在在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;
}