jQuery - 点击事件陷入困境/获取鸿沟

Question

我只是制作一个吉他和弦索引，让你在点击其中时看到所有音符。你可以在这里看到它（到目前为止只有A和弦完成）：http://codepen.io/JTBennett/full/rWEOod/

问题在于，当你快速连续点击特定和弦或多个和弦时，事情就会陷入困境 - 有时会很快赶上，有些则只是无所事事。我认为它可能是使用的图像（它们大约是7kb ea。）所以我把它们放在预加载器中 - 没有区别。

我很感激，如果有人能快速浏览并告诉我是否有一些我不知道的东西 - 这是代码：

function preloadImages(array) {
if (!preloadImages.list) {
    preloadImages.list = [];
}

    var list = preloadImages.list;
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        img.onload = function() {
            var index = list.indexOf(this);
            if (index !== -1) {
                list.splice(index, 1);
            }
        }
        list.push(img);
        img.src = array[i];
    }
}

preloadImages(["http://www.joeltbennett.com/guitar_chords/img/chords/A/A.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Asharp.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Asharp-4.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Asharp-7.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Asharp-dim.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Asharp-m.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Asharp-m7.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Asharp-maj7.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A-plus.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A-D.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A-Fsharp.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A-Gsharp.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A11.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A13-5.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A4.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A6.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A7.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A7-9-plus.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A7-plus.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A7-sus4.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A9.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Ab.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Ab-plus.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Ab11.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Ab4.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Ab7.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Ab-dim.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Abm.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Abm7.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Abmaj-J7.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A-dim.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Am.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Am7.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Am7-sharp.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Am7-sus4.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Am-add9.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Am-G.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Am6.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Am7.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/Am9.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A-maj7.png", "http://www.joeltbennett.com/guitar_chords/img/chords/A/A-sus.png"]);

$(document).ready(function(){
    $(".note").hide();
    $(".note-menu").hide();

  $(".btn-class").click(function(){
    $(".note-menu").fadeIn();
  });

    $(".note-men-closer").click(function(){
    $(".note-menu").fadeOut();
  });

  $(".chord-btn").click(function(){
    $(".note").fadeOut(slow);
  });


  $("#cb-A > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-0,#D-2,#G-2,#B-2,#E2-0").fadeIn();
  });
    $("#cb-Asharp > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-1,#D-3,#G-3,#B-3,#E2-1").fadeIn();
  });
    $("#cb-Asharp4 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-X,#D-3,#G-3,#B-4,#E2-1").fadeIn();
  });
    $("#cb-Asharp7 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-X,#D-1,#G-1,#B-1,#E2-2").fadeIn();
  });
    $("#cb-Asharp-dim > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-X,#D-2,#G-3,#B-2,#E2-3").fadeIn();
  });
    $("#cb-Asharp-m > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-1,#D-3,#G-3,#B-2,#E2-1").fadeIn();
  });
    $("#cb-Asharp-m7 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-1,#D-3,#G-1,#B-2,#E2-1").fadeIn();
  });
    $("#cb-Asharp-maj7 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-1,#D-3,#G-2,#B-3,#E2-X").fadeIn();
  });
    $("#cb-A-plus > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-0,#D-3,#G-2,#B-2,#E2-1").fadeIn();
  });
    $("#cb-A-D > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-X,#D-0,#G-0,#B-2,#E2-2").fadeIn();
  });
    $("#cb-A-Fsharp > div").click(function(){
    $(".note").fadeOut(),
    $("#E-2,#A-0,#D-2,#G-2,#B-2,#E2-0").fadeIn();
  });
    $("#cb-A-Gsharp > div").click(function(){
    $(".note").fadeOut(),
    $("#E-4,#A-0,#D-2,#G-2,#B-2,#E2-0").fadeIn();
  });
    $("#cb-A11 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-4,#D-2,#G-4,#B-2,#E2-2").fadeIn();
  });
    $("#cb-A13 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-0,#D-1,#G-2,#B-3,#E2-1").fadeIn();
  });
    $("#cb-A4 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-0,#A-0,#D-2,#G-2,#B-0,#E2-0").fadeIn();
  });
    $("#cb-A6 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-X,#D-2,#G-2,#B-2,#E2-2").fadeIn();
  });
    $("#cb-A7 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-0,#D-2,#G-0,#B-2,#E2-0").fadeIn();
  });
    $("#cb-A79-plus > div").click(function(){
    $(".note").fadeOut(),
    $("#E-2,#A-0,#D-3,#G-0,#B-2,#E2-3").fadeIn();
  });
    $("#cb-A7-plus > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-X,#D-3,#G-2,#B-2,#E2-1").fadeIn();
  });
    $("#cb-A7-sus4 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-0,#A-0,#D-2,#G-0,#B-3,#E2-0").fadeIn();
  });
    $("#cb-A9 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-0,#D-2,#G-1,#B-0,#E2-0").fadeIn();
  });
    $("#cb-Ab > div").click(function(){
    $(".note").fadeOut(),
    $("#E-1,#A-3,#D-3,#G-2,#B-1,#E2-1").fadeIn();
  });
    $("#cb-Ab-plus > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-X,#D-2,#G-1,#B-1,#E2-0").fadeIn();
  });
    $("#cb-Ab11 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-1,#A-3,#D-1,#G-3,#B-1,#E2-1").fadeIn();
  });
    $("#cb-Ab4 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-X,#D-1,#G-1,#B-2,#E2-3").fadeIn();
  });
    $("#cb-Ab7 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-X,#D-1,#G-1,#B-1,#E2-2").fadeIn();
  });
    $("#cb-Ab-dim > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-X,#D-0,#G-1,#B-0,#E2-1").fadeIn();
  });
    $("#cb-Abm > div").click(function(){
    $(".note").fadeOut(),
    $("#E-1,#A-3,#D-3,#G-1,#B-1,#E2-1").fadeIn();
  });
    $("#cb-Abm7 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-X,#D-1,#G-1,#B-1,#E2-1").fadeIn();
  });
    $("#cb-Abmaj7 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-X,#D-1,#G-1,#B-1,#E2-3").fadeIn();
  });
    $("#cb-Adim > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-X,#D-1,#G-2,#B-1,#E2-2").fadeIn();
  });
    $("#cb-Am > div").click(function(){
    $(".note").fadeOut(),
    $("#E-0,#A-0,#D-2,#G-2,#B-1,#E2-0").fadeIn();
  });
    $("#cb-Am7 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-0,#D-2,#G-2,#B-1,#E2-3").fadeIn();
  });
    $("#cb-Am7-sharp > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-0,#D-3,#G-2,#B-1,#E2-3").fadeIn();
  });
    $("#cb-Am7-sus4 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-0,#A-0,#D-0,#G-0,#B-3,#E2-0").fadeIn();
  });
    $("#cb-Am7-add9 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-0,#A-2,#D-2,#G-2,#B-1,#E2-0").fadeIn();
  });
    $("#cb-Am-G > div").click(function(){
    $(".note").fadeOut(),
    $("#E-3,#A-0,#D-2,#G-2,#B-1,#E2-0").fadeIn();
  });
    $("#cb-Am6 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-0,#D-2,#G-2,#B-1,#E2-2").fadeIn();
  });
    $("#cb-Am7 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-0,#D-2,#G-2,#B-1,#E2-3").fadeIn();
  });
    $("#cb-Am9 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-0,#D-1,#G-1,#B-1,#E2-3").fadeIn();
  });
    $("#cb-A-maj7 > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-0,#D-2,#G-1,#B-2,#E2-0").fadeIn();
  });
    $("#cb-A-sus > div").click(function(){
    $(".note").fadeOut(),
    $("#E-X,#A-X,#D-2,#G-2,#B-3,#E2-0").fadeIn();
  });


});

它仍在继续工作，所以如果有些事情看起来不完整，请不要担心。 谢谢！ -Joel