计算给定时间内的点击次数/空格键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 can_click = true; 
var left_right = "left";
var trial_no = 0;
var trials = {
  left:[0,0,0,0,0],
  right:[0,0,0,0,0],
}
var count_clicks= 0;
function myInterval(i) {
  var interval = setInterval(function(){startInterval()}, 1000);
  function startInterval(){
    if(i <= 0){
      clearInterval(interval);
      can_click = false;      
      trial_no++;
      if(trial_no < 10){
        if((trial_no % 2) == 1){ //odd or even check
          left_right = "right";
          $("#left_or_right_trial").html("right");
        } else {
          left_right = "left";
          $("#left_or_right_trial").html("left");
        }
        myInterval(10)  
      }      
      //$("#btn").prop('disabled', true); //delete this line
    } else{
      can_click = true;
      i--;
      $("#timer").text(i);
     
    }
  }
}

function space_pressed(){
  
  
  if(can_click == true){ 
    count_clicks++
  }
  console.dir("hello");
  console.dir(left_right);
  $("#result").text(count_clicks);
  if(count_clicks == 1){
    myInterval(10);
  }
  
  var this_id = left_right+"_"+trial_no;
  
  trials[left_right][trial_no]++;
  $("#"+this_id).html(trials[left_right][trial_no]);
  
};



 
document.body.onkeyup = function(e){
  if (e.keyCode == 32){
     space_pressed();
     
     $("#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>

<span id="result_left"></span><br>
<span id="result_right"></span><br>
<br>
<table>
  <tr>
    <td id="left_or_right_trial" colspan="6">Left
    </td>
  </tr>
  <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 id="left_0"></td>
    <td id="left_2"></td>
    <td id="left_4"></td>
    <td id="left_5"></td>
    <td id="left_8"></td>
  </tr>
  <tr>
    <th>right</th>
    <td id="right_1"></td>
    <td id="right_3"></td>
    <td id="right_4"></td>
    <td id="right_5"></td>
    <td id="right_7"></td>
  </tr>
</table>

Answer 2

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