如何使用setTimeout来监视长时间运行的函数的进度

Question

下面有一个功能组件。当我的用户点击点击我按钮时，我想在3秒钟后用函数GetAllData调用一个长时间运行的事务。

在h1标签中，我希望能够更新我的用户，这样他们就可以知道完成了长时间运行的事务。我想像5,4,3,2,1一样倒计时，完成

我如何更新此代码才能做到这一点？

import React, { useState, useEffect } from "react";
export default function App() {
const [count, setCount] = useState(5);
const kickoff = () => {
const timeout = setTimeout(() => {
GetAllData()
//setCount(1);
}, 3000);

}

return (
<div className="App">
<h1>{count}</h1>
<button onClick={() => kickoff}>Click Me</button>
</div>
);
}

Answer 1

如何对长时间运行的进程进行倒计时？有没有任何情况下，当你调用它时，你确切地知道需要多长时间才能倒计数到0？答案是否定的。

如果您想在完成时通知用户，请使用state并在进程完成时设置标志(在回调中(。

const [isRunning, setIsRunning] = useState(false)
<h1>{isRunning ? 'Process is running': ''}</h1>

编辑

如果这是一个长期运行的过程，你可能想把它分解成一个网络工作者(你必须自己研究(。或者，你可以用承诺来包装它。

基本上，在调用长时间运行的流程之前，您会将标志设置为true，然后在流程完成时，通过回调或在promise的情况下，.then()将其设置为false。如果进程处于阻塞状态，则不会显示状态消息，因为重新渲染将被阻塞，直到完成为止。