javascript - 将用户点击推送到数组，然后在 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 = [];
  }
}

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