javascript - 计算给定时间内的点击次数/空格键

基本上，我想制作一个游戏，计算10秒内的空格键按下/按钮点击次数。
我做了一个倒数计时器，计数器都工作正常

我找不到停止计数按键的方法（在计时器停止后），所以我使用了“禁用”按钮，但如果有更好的选择，建议我。

这就是我所做的全部，但是我希望在同一游戏中进行10次试用，每次试用后应将点击次数保存在变量试用/表中。

var trials = {
  left:{
    trial_1:0,
    trial_2:0,
    trial_3:0,
    trial_4:0,
    trial_5:0
  },
    right:{
    trial_1:0,
    trial_2:0,
    trial_3:0,
    trial_4:0,
    trial_5:0
  }
}
var count_clicks= 0;
function myInterval(i) {
  var interval = setInterval(function(){startInterval()}, 1000);
  function startInterval(){
    if(i <= 0){
      clearInterval(interval);
       $("#btn").prop('disabled', true);
    } else{
      i--;
      $("#timer").text(i);

    }
  }
}

  $("#btn").on("click",function(){
    count_clicks++
    $("#result").text(count_clicks);
    if(count_clicks == 1){
    myInterval(10);
    }

  });



document.body.onkeyup = function(e){
  if (e.keyCode == 32){
     $("#btn").click();
      return false;
     }
}

#btn{
  height:30px;
  width:100px;
}
tr, th, td{
  border:1px solid black;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="timer"></span> seconds<br>
<input id="btn" type="submit" value="Click Me">
<span id="result"></span><br>
<br>
<table>
  <tr>
    <th>hand</th>
    <th>trial 1</th>
    <th>trial 2</th>
    <th>trial 3</th>
    <th>trial 4</th>
    <th>trial 5</th>
  </tr>
  <tr>
    <th>left</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>right</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

最佳答案

我添加了var disabled = false并将其添加到if (e.keyCode == 32 && !disabled){

之后我们将其设置为true

clearInterval(interval);
disabled = true;

演示

var trials = {
  left:{
    trial_1:0,
    trial_2:0,
    trial_3:0,
    trial_4:0,
    trial_5:0
  },
    right:{
    trial_1:0,
    trial_2:0,
    trial_3:0,
    trial_4:0,
    trial_5:0
  }
}
var count_clicks= 0;
var disabled = false;
function myInterval(i) {
  var interval = setInterval(function(){startInterval()}, 1000);
  function startInterval(){
    if(i <= 0){
      clearInterval(interval);
      disabled = true;
       $("#btn").prop('disabled', true);
    } else{
      i--;
      $("#timer").text(i);

    }
  }
}

  $("#btn").on("click",function(){
    count_clicks++
    $("#result").text(count_clicks);
    if(count_clicks == 1){
    myInterval(10);
    }

  });



document.body.onkeyup = function(e){
  if (e.keyCode == 32 && !disabled){
     $("#btn").click();
      return false;
     }
}

#btn{
  height:30px;
  width:100px;
}
tr, th, td{
  border:1px solid black;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="timer"></span> seconds<br>
<input id="btn" type="submit" value="Click Me">
<span id="result"></span><br>
<br>
<table>
  <tr>
    <th>hand</th>
    <th>trial 1</th>
    <th>trial 2</th>
    <th>trial 3</th>
    <th>trial 4</th>
    <th>trial 5</th>
  </tr>
  <tr>
    <th>left</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>right</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>