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

Question

基本上，我想制作一个计算 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>

Answer 1

我添加了一个 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>