加载消息并设置超时

Question

如果加载第一条消息"需要时间，我想为导出文件按钮添加加载消息；请稍候"；在10秒后设置超时为"0"；正在加载"在20秒之后；对不起，请稍候">

const [loading, setLoading] = useState(false);
function greet1() {
return "please wait.."
}
function greet2() {
return "loading"
}
function greet3() {
return "sorry, please wait..."
}
const list= () => {
setLoading(true)
if (loading) {
setTimeout(() => {
greet1
}, 0);
setTimeout(() => {
greet2
}, 2000);
setTimeout(() => {
greet3
}, 3000);
}
}

Answer 1

您可以编写：

if (loading) {
let time = 0;
setTimeout(() => {
switch(time) {
case 2:
alert("please wait...");
break;
case 5:
alert("loading...");
break;
case 10:
alert("sorry, please wait...");
break;
}
time++;
}, 1000);
}

Answer 2

我不确定你的代码在React中如何，但在简单的JS中它是如何工作的。只需根据需要进行调整即可。更新：增加了在message分区内写入的能力

var message = document.getElementById("message");
function greet1() {
message.innerHTML = "please wait..";
}
function greet2() {
message.innerHTML= "loading";
}
function greet3() {
message.innerHTML= "sorry, please wait...";
}
var loading = true;
if (loading) {
setTimeout(() => {
greet1();
}, 0);
setTimeout(() => {
greet2();
}, 2000);
setTimeout(() => {
greet3();
}, 3000);
}

<div id="message" ></div>

Answer 3

在您的特定情况下，您可以执行以下操作：

1. 您需要更正语法。函数是通过使用命名空间后面的()来调用的。例如greet1()
2. 创建一个基于计数器的状态(因为您的消息似乎根据"持续时间"而有所不同(。这允许我们确定"；时间"；已经过去了

const [downloadStatus, setDownloadStatus] = useState(0);

3. 添加一个onClick侦听器以触发下载

const messageDownloadPairs = { 
1: ["Message1", 0],
2: ["Message2", 10 * 1000]
3: ["Message3", 20 * 1000]
}
const getDownloadMessageTimePair = (status) => 
messages[Math.min(status, Object.values(messages).length)]

在return下具有以下jsx

<button onClick={invokeDownload}>{getDownloadMessage(downloadStatus)[0]}</button>

其中invokeDownload在签名之后

const invokeDownload = () => {
// Your download code here.
setDownloadStatus(1) // Notifying the component that the download has started.
}

4. 创建一个函数checkDownloadStatus以检查下载是否已完成。你可以在这里找到一些例子
5. 使用钩子useEffect来处理超时和状态更新

useEffect(() => { 
const downloadComplete = checkDownloadStatus()
if (!downloadComplete) { 
const newDownloadStatus = downloadStatus + 1
setTimeOut(
() => setDownloadStatus(newDownloadStatus), 
getDownloadMessageTimePair(downloadStatus)[1]
)
}
}, [downloadStatus])

有了这个，你就有了一个"；进度支持"；按钮来跟踪您的csv下载。当我得到更多关于你项目细节的信息时，我会更新这个。