显示最短时间的加载微调器
提问于 2021-05-01 13:17:47
我在axios请求期间实现了一个页面加载器，但它显示的时间很短。如何在react中用花哨的淡入淡出显示它至少2秒？有可能吗？
const Loader = () => (
<div class="divLoader">
Loading..
</div>
);
class dashboard extends Component {
constructor(props) {
super(props);
this.state = {
loading: true,
data: [],
}
}
componentDidMount() {
axios.get("http://localhost:8080/user/dashboard")
.then((res) => {
const data = res.data;
this.setState({ data, loading: false })
}, (error) => {
this.handleLogout();
console.log("dasboard ERR");
});
}
render() {
return (
<div className="container-xxl">
{this.state.loading ? <Loader /> : <Content />}
</div>
)};
}
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-05-01 13:52:31
你必须通过考虑两件事来设计你试图实现的目标。
如果您的应用程序接口响应时间非常短，那么可以通过应用setTimeOut将加载器保留额外的几次。但在这里，您还需要记住另一件事。如果您的API响应时间需要一个中等的时间，足以显示加载程序的生命周期，那该怎么办？在这种情况下，你可能不会保留你的加载器额外的时间，因为这将使访问者感到无聊。所以，你要做的就是保持一个计时器。比方说，x(以毫秒为单位)是您希望显示加载器的最少时间。如果运行时间(或API响应时间，即加载程序此时处于活动状态)大于x，那么您就完成了。如果不是，则使用(x - elapsed time)的setTimeOut。
Stack Overflow用户
发布于 2021-05-01 13:26:36
加载器显示时间很短的原因是因为获取数据花费的时间太少，并且将加载器的状态更改为false，这会导致重新呈现并显示内容，而不是加载器。
componentDidMount() {
axios.get("http://localhost:8080/user/dashboard")
.then((res) => {
const data = res.data;
// this.setState({ data, loading: false })
setTimeout(() => {
this.setState({data, loading: false })
}, 2000)
}, (error) => {
this.handleLogout();
console.log("dasboard ERR");
});
}我在这里做的是使用setTimeOut，它将等待2000ms或2s，然后它会将state -> loading更新为false，因此内容将在恰好2秒后显示。
Stack Overflow用户
发布于 2021-09-25 09:56:16
const delay = 1000; //1s
export const Loader = ({ loading, children }) => {
const timing = useRef(Date.now()).current;
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
if (!loading) {
const elapsedTime = Date.now() - timing;
console.log("Loader.elapsedTime", elapsedTime);
// show loading minimum 1s
// prevent show/hide too fast
if (elapsedTime >= delay) {
setIsLoading(false);
} else {
const remainTime = delay - elapsedTime;
console.log("Loader.remainTime", remainTime);
setTimeout(() => {
setIsLoading(false);
}, remainTime);
}
}
}, [loading]);
if (isLoading) {
return <Loading />;
}
return children;
};你可以这样使用它：
<Loader loading={this.state.loading}>
// content
</Loader>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67346724
复制
腾讯云开发者
