javascript - 如何循环遍历数组，每次触发数组中每一项的单击事件

Question

我的函数中遇到了一些问题。我试图在数组的每一项之间有短暂的延迟来触发一个又一个的点击事件...如果有人可以向我解释如何修复它以及原因。我将非常感谢任何帮助。

var track3 = new Audio();
track3.src= 'https://s3.amazonaws.com/freecodecamp/simonSound1.mp3';

head= $("#head").click (function (){
  $("#head").css ("background-color","black");
  $("#head").css({ opacity: 0.9});
  track3.play ();
  setTimeout(function(){
    $("#head").css({ opacity: 0.0 });
    $("#head").css("background-color","");
  }, 300);
});

shoulders= $("#shoulders").click (function (){
  $("#shoulders").css ("background-color","cyan");
  track3.play();
  setTimeout(function() {
    $("#shoulders").css("background-color","");
  }, 300);
});

knees= $("#knees").click (function (){
  $("#knees").css ("background-color","mediumPurple");
  track3.play ();
  setTimeout(function(){
    $("#knees").css("background-color", "");
  }, 300);
});

toes= $("#toes").click (function (){
  $("#toes").css ("background-color","mediumSpringGreen");
  track3.play();
  setTimeout(function() {
    $("#toes").css("background-color", "");
  }, 300);
})

var round= 0;
var player= [ ];
var simon=[ ];
var pat= ["head", "shoulders", "knees", "toes"];

$(".start").click(function (){
  simon=[ ];
  player=[ ];
  round=0;
  additionalRound();
})

function additionalRound(){
  round ++;
  $("h2").html("Round:" +round);
  setTimeout(function() {
    $("h2").html("HEAD, SHOULDERS, KNEES, AND TOES!");
  },2660);
  sequence();
}

function sequence (){
  simon.push(pat[Math.floor (Math.random ()*4 )]);
  blinkerBeats ();
}

function blinkerBeats() {
  for (var i = 0; i < simon.length; i++) {
    setTimeout(function() {
      $(simon[i]).trigger('click');
    }, i * 800);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

好的，我将您的问题编辑为可读的代码。以下是我们要寻找的内容:

function sequence (){
  simon.push(pat[Math.floor (Math.random ()*4 )]);
  blinkerBeats (simon);
}

function blinkerBeats(arr) {
  var timer = 0,
      interval = 800;
  arr.map(function(elem){
    timer++;
    setTimeout(function(){
      $('#'+elem).trigger('click');
    }, timer * interval)
  })
}

现在，simon.push()在你的sequence()函数仅向数组添加 1 个条目。如果您确实想要一个序列，您可能想要这样做:

function sequence (times){
  for (i = 0; i < times; i++) {
    simon.push(pat[Math.floor (Math.random ()*4 )]);
  }
  blinkerBeats (simon);
}

工作示例:由于我没有您的初始标记，因此我只使用了一些简单的 <input> s 来测试代码。请注意，我没有更改其余的函数(因为我不熟悉它们的逻辑 - 我只更改 sequence() 和 blinkerBeats() 函数:

var track3 = new Audio();
track3.src= 'https://s3.amazonaws.com/freecodecamp/simonSound1.mp3';

head= $("#head").click (function (){
  $("#head").css ("background-color","black");
  $("#head").css({ opacity: 0.9});
  track3.play ();
  setTimeout(function(){
    $("#head").css({ opacity: 0.0 });
    $("#head").css("background-color","");
  }, 300);
});

shoulders= $("#shoulders").click (function (){
  $("#shoulders").css ("background-color","cyan");
  track3.play();
  setTimeout(function() {
    $("#shoulders").css("background-color","");
  }, 300);
});

knees= $("#knees").click (function (){
  $("#knees").css ("background-color","mediumPurple");
  track3.play ();
  setTimeout(function(){
    $("#knees").css("background-color", "");
  }, 300);
});

toes= $("#toes").click (function (){
  $("#toes").css ("background-color","mediumSpringGreen");
  track3.play();
  setTimeout(function() {
    $("#toes").css("background-color", "");
  }, 300);
})

var round= 0;
var player= [ ];
var simon=[ ];
var pat= ["head", "shoulders", "knees", "toes"];

$(".start").click(function (){
  simon=[ ];
  player=[ ];
  round=0;
  additionalRound();
})

function additionalRound(){
  round ++;
  $("h2").html("Round:" +round);
  setTimeout(function() {
    $("h2").html("HEAD, SHOULDERS, KNEES, AND TOES!");
  },2660);
  sequence($('#clicks').val());
}

function sequence (times){
  for (i = 0; i < times; i++) {
    simon.push(pat[Math.floor (Math.random ()*4 )]);
  }
  blinkerBeats (simon);
}

function blinkerBeats(arr) {
  var timer = 0,
      interval = 800;
  arr.map(function(elem){
    timer++;
    setTimeout(function(){
      $('#'+elem).trigger('click');
    }, timer * interval)
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" id="head"> Head</label>
<label><input type="checkbox" id="shoulders">Shoulders</label>
<label><input type="checkbox" id="knees">Knees</label>
<label><input type="checkbox" id="toes">Toes</label>
<hr />
Times: <input type="number" value="6" id="clicks" />
<input type="button" value="Start" class="start" />


<h2>Click start!</h2>