时间戳

首页 > 解决方案 > 使页面循环显示 10 秒

javascript - 使页面循环显示 10 秒

问题描述

我正在用 Node JS 构建一个猜谜游戏。在后端收集一些数据后，我将其发送到前端，然后游戏开始。数据包含所有 10 个级别，因此游戏可以在单个页面上运行。每个级别运行 10 秒。时间到后，将用户选择发送到服务器，并返回结果。显示答案，然后将内容更改为“下一级”（使用大数据对象中的内容，因此无需刷新）。

我遇到了一些问题，即每个级别运行 10 秒（或延迟显示结果约 12 秒）。

这不能在某种类型的循环中完成，因为awaits每个级别的所有内容都将同时运行。例如：

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

for (let i = 0; i < 10; i++) {
    displayPage(i);
    await timeout(10000);
    const result = await $.post(...) // gets results
    displayResults(result);
    await timeout(2000);
}

所有的timeouts 将立即运行，它不会工作。

我想过使用 a setInterval，但我不知道如何......因为我想等待 10 秒直到检查输入，然后显示结果 2 秒，然后继续。

现在我想出的结果是：

displayPage(level1);
await timeout(10000);
const result = await $.post(...)
displayResults(result);
await timeout(2000);

displayPage(level2);
await timeout(10000);
const result = await $.post(...)
displayResults(result);
await timeout(2000);

displayPage(level3);
await timeout(10000);
const result = await $.post(...)
displayResults(result);
await timeout(2000);

displayPage(level4);
await timeout(10000);
const result = await $.post(...)
displayResults(result);
await timeout(2000);

...

这似乎效率不高，我认为有更好的方法可以做到这一点，但我不确定如何。任何建议，将不胜感激。谢谢！

标签： javascriptjqueryasynchronousasync-await

解决方案

假设它包含在异步函数中，您的第一个选项似乎可以工作：

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
const testFunc = async () =>{
  for (let i = 0; i < 10; i++) {
      console.log('page' , i+1 , '- question')
      await timeout(3000);
      console.log('page' , i+1 , '- answer')
      await timeout(1000);
  }
}
testFunc()

推荐阅读