javascript - 同时检查来自多个数组的 boolean 值，没有多个 if 语句

Question

代码运行没问题，但我确信有更有效的方法来执行此操作。目前它在 Firefox 中运行良好，但在 Chrome 中崩溃了。在每一步检查 boolean 值，相隔 110 毫秒，结果数组中的项目是真还是假决定是否触发声音(该数组唯一)。当 Chrome 出现峰值时，代码中的某些内容会堆叠，这会导致各种故障和泄漏......我似乎无法找到一种方法将所有这些捆绑到每个循环的一次检查中，而不是运行所有这些 if 语句。可能吗？

var loop = [{
    "sound": "one",
    "pattern": [true, false, false, false],
    "volume": 100
    },{
    "sound": "two",
    "pattern": [false, true, false, true],
    "volume": 100 
    },{
    "sound": "three",
    "pattern": [true, true, true, true],
    "volume": 100 
    }]

var s = 0;
function startLoop(){   
    if (playing === true){  
        setTimeout(function(){          
            if (typeof loop[0] !== "undefined") {
                if (loop[0].pattern[s] === true){
                    soundset.play(loop[0].sound);
                }
            }
            if (typeof loop[1] !== "undefined") {
                if (loop[1].pattern[s] === true){
                    soundset.play(loop[1].sound);               
                }
            }
            if (typeof loop[2] !== "undefined") {
                if (loop[2].pattern[s] === true){
                    soundset.play(loop[2].sound);               
                }
            }
            s++;
            if (s < loop[0].pattern.length){
                startLoop();
            } else {
                s = 0;
                startLoop();
            }

        }, 110)
    } else {return;}
};

typeof loop[x] !== "undefined" 是为了防止 x 之上的循环不存在。计划运行大约 10 个这样的步骤，但这种检查每个步骤的方法很难做到只有三个。

Answer 1

• 使用 forEach() 而不是硬编码 loop[0]、loop[1] 等......。这样你就可以在你的轨道上拥有无穷无尽的乐器。
• 在停止(或暂停)播放时清除您的滴答超时。
• 预加载您的声音(并将它们填充到每个相应的loop 对象.audio 中)。
• 您可以使用0 和1 来代替true 和false 来简单明了地指示 boolean 值 值。
• Volume 从 0.0 到 1.0
• 您可以使用Modulo oparator % 环回0 您的s 股票索引。

var bpm = 60;             // Beats per minute
var div = 4;              // "4/4 division" (the pattern length)
var s = 0;
var tickTimeout = null;

var loop = [{
  name: "kick",           // it's a sound/file name
  pattern: [1, 0, 0, 0],  // can be expressed using 0 and 1
  volume: 1               // volume goes from 0.0 to 1.0, remember?
},{
  name: "snare",
  pattern: [0, 1, 0, 1],
  volume: 1 
},{
  name: "hihat",
  pattern: [1, 1, 1, 1],
  volume: 1 
}];

// Preload sounds
loop.map(function(obj){
  obj.audio = new Audio("../audio/drumset-rock/"+ obj.name +".mp3");
  obj.audio.volume = obj.volume;
});

// Play tick
function play(){ 
  var names = "";                     // Demo only
  loop.forEach(function(obj) {        
    if (obj.pattern[s]) {
      obj.audio.play();               // Play sound if in pattern
      names += " "+ obj.name          // Demo only
    }
  });
  console.log(s +': '+ names);        // Demo only

  s = ++s % div;                      // Increment and loopback
  tickTimeout = setTimeout(play, 1000 * 60 / bpm);  // Next tick at bpm
}

function stop() {
  clearTimeout(tickTimeout);
}

play();         // Start loop
// stop();      // Use to immediately stop drum machine