javascript - 涉及 jQuery 的鼓机排序

Question

假设我有以下代码:

  var blinker = function(element){
  if(stopped){
    return;
  } else {
  var sampleMapping = {'0': 'bass.wav',
                 '1': 'clap(2).wav',
                 '2': 'hihat(4).wav',
                 '3': 'tom(9).wav',
                 '4': 'hihat.wav',
                 '5': 'ArpEC1.wav'}

  if (element.attr('value') === 'hit'){
    var sample = element.attr('id');
    instrument(sample);
  }
    element.fadeOut(200);
    element.fadeIn(200);
    }
  }

  var sequencerRun = function(){    
  var currentTime = 0;
  var starting = 200;
  var startTime = 0;
    for(var k = 0; k < 16; k++){
      $(".instrument td .beat" + k).each(function(){
        setTimeout(blinker, currentTime,$(this));
      })
      currentTime += starting;
    }
  }

  var timerId, setInt;

  var runSeq = function(){
    setInt = setInterval(sequencerRun,3200);
  }

  $('.play').click(function(){
    stopped = false
    sequencerRun();
    runSeq();
  })

  $('.stop').click(function(){
    clearInterval(setInt);
    stopped = true;
  })

我正在编写代码来在我的鼓机中执行音序器运行。可以看到我的应用程序的部署版本 here

所以我所做的是使用 table HTML 结构创建一个矩阵。单击“播放”时，将调用sequencerRun 并运行一次。第一次运行后，setInterval 会小心地调用所有sequencerRun，直到用户单击“停止”。这些点击事件监听器中有一个标志，我将稍后再讨论。

此排序的核心是 sequencerRun。对于矩阵中对应于节拍的每一列，我计划对该列进行检查，以查看是否已选择任何元素用于将来的播放。 sequencerRun 只负责调度。更明确地说:

setTimeout(blinker,0, $(this)) is the same as check the first column right away
setTimeout(blinker,0, $(this)) is the same as check the second column at time 200
setTimeout(blinker,0, $(this)) is the same as check the third column at time 400
....
setTimeout(blinker,0, $(this)) is the same as check the sixteenth column at time 3200

现在，blinker 所做的是检查是否停止，我创建的原始标志是 true 还是 false。当单击“停止”时，它变为 true，这意味着不执行列检查并且没有任何内容播放。如果为 false，则执行鼓机的正常过程。

现在问题来了。如果您转到应用程序的已部署版本，此标记会引入一个严重的错误。该错误是，如果您按播放，音序器就会启动，但如果再次单击播放，则会开始另一次运行，这不是鼓机应该如何工作的。本质上我想看到的是，如果我按下播放键，那么如果我再次按下播放键，其他音序器运行就不会启动。另外，如果你点击“播放”、“停止”、“播放”，我也会得到同样的副作用。我认为我的主要问题是 sequencerRun 立即安排 future 的节拍和我的标记。有人知道如何解决这个问题吗？

Answer 1

只需在 .play 点击处理程序中使用 stopped 变量即可:

$('.play').click(function(){
    if (stopped) {
        stopped = false
        sequencerRun();
        runSeq();
    }
});

如果stopped标志为假，再次点击播放将不会执行任何操作。要在单击停止时停止排队序列的其余部分，您需要清除已设置的超时。首先，请确保您保留了每个对象的句柄:

var sequenceTimeouts = [];
var sequencerRun = function(){    
    var currentTime = 0;
    var starting = 200;
    var startTime = 0;
    //reset array
    sequenceTimeouts = [];
    for(var k = 0; k < 16; k++){
        $(".instrument td .beat" + k).each(function(){
            //push each timeout into the array
            sequenceTimeouts.push(setTimeout(blinker, currentTime,$(this)));
        })
        currentTime += starting;
    }
 }

然后在停止点击处理程序中，清除其中的每一个:

$.each(sequenceTimeouts, function(i, timeout) {
    clearTimeout(timeout);
});