将用户点击推送到数组，然后在 Javascript 中设置时间后显示数组？

Question

我正在尝试编写一个函数，在该函数中，用户有一定的时间来点击页面上的五个 div。被点击的 div 的 id 然后被推送到一个数组中。我希望用户可能有几秒钟的点击时间，然后会弹出一个警报，给出他们点击的 div 的值。到目前为止，我的代码将值推送到一个数组，但我未能使两件事中的任何一件发生。首先（未在下面的代码中显示），我希望它在用户点击五次（或五个值推送到数组）时停止并显示警报。我尝试循环函数直到数组长度等于 5，但没有骰子。

其次，如下所示，我想给点击几秒钟，然后警报会显示 userClicks 数组值。再次，没有骰子。我在这里想念什么？需要明确的是，我不必能够在单个函数中同时做这两件事，但如果可能的话，我想尝试两者作为一个选项。这是我当前的代码：

let userClicks = [];
function reply_click(clicked_id) {
    setTimeout(function () {
        userClicks.push(clicked_id);
    }, 3000);
    alert(userClicks);
}

这是相关的 HTML：

<div id="game-container">
    <div id="0" class="cell" onClick="reply_click(this.id)"></div>
    <div id="1" class="cell" onClick="reply_click(this.id)"></div>
    <div id="2" class="cell" onClick="reply_click(this.id)"></div>
    <div id="3" class="cell" onClick="reply_click(this.id)"></div>
    <div id="4" class="cell" onClick="reply_click(this.id)"></div>
    <div id="5" class="cell" onClick="reply_click(this.id)"></div>
    <div id="6" class="cell" onClick="reply_click(this.id)"></div>
    <div id="7" class="cell" onClick="reply_click(this.id)"></div>
    <div id="8" class="cell" onClick="reply_click(this.id)"></div>
</div>

谢谢！

Answer 1

首先要做的事情。

对于第一个要求，即点击 5 次后显示警报，很简单：

let userClicks = [];
function reply_click(clicked_id) {
  userClicks.push(clicked_id);
  if (userClicks.length === 5) {
    alert('5 clicks done!');
  }
}

对于第二个要求，我不确定我是否理解正确，但如果您的意思是用户应该在 2 秒的时间范围内进行 5 次点击，那也可以。像这样的：

let userClicks = [];
const startTime = new Date();
function reply_click(clicked_id) {
  const now = new Date();
  const seconds = (now.getTime() - startTime.getTime()) / 1000;
  if (seconds > 2) {
    alert('Sorry, you lost the game!');
    userClicks = [];
  }
}

现在，你的工作就是将两者结合起来。