JS函数每次点击触发，计数点击，按顺序排列

Question

我正在尝试组织我的JS函数，使其整齐地一个接一个地出现onClick。目前，它们都处于无序运行状态；与相反，Click =1执行此操作；Click=2执行此操作。有什么指示吗？下面是我的JS。完整的演示链接可以在：'http://bit.ly/10BW89N‘上看到。你可以看到我的意思，通过访问我的演示，并注意到点击不遵循顺序为1,2,3,4等-贯穿。

单击钉头，注意单击3突然跳过单击8。我正在尝试这样做，这样我就可以轻松地按照特定的单击号添加函数。例如：第30次点击，最后一次点击，做一些非常酷的事情，但是它必须在第30次点击时启动，而不是像第3次那样，因为它违背了目标。

$(document).ready(function () {
    var a1_Events = [function1, function2, function3, function5, function6, function7, function8],
        a1_c = 0;
    function function1() {
        alert('Click 1!');
    }
    function function2() {
        alert('Click 2!');
    }
    function function3() {
        $("#area1").hide();
        $("#area2").show();
        alert('Click 3!');

    }
    function function5() {
        alert('Click 4!');
    }
    function function6() {
        $("#bg_div").hide(0).delay(1500).show(0);
        $("#bg_skew").show(0).delay(1500).hide(0);
        alert('Click 5!');

    }
    function function7() {
        alert('Click 6!');
    }
    function function8() {
        $("#area1").hide(0).delay(1500).show(0);
        $("#area2").hide(0).delay(1500).show(0);
        $("#sound1").show(0).delay(4500).hide(0);

            document.getElementById("id1").play(); // OK..

        $("#hammer").show(0).delay(1500).hide(0);
        $("#youwin").show(0).delay(3500).hide(0);
        alert('Click 7!');


    }
    $('#area1').click(function () {
        a1_Events[a1_c++ % a1_Events.length]();
    });
    $("#area2").click(function () {
        $("#area1").show();
        $("#area2").hide();
          alert('Click 8!');
    });
});

function alert(msg) {
    $("#alert").text(msg).show(0).delay(1500).hide(0);
}

在前一个项目中-在视频中定义自定义cuepoint；我找到了一个解决方案，可以整洁地调用和声明定制的cuepoint，如下所示；如果我可以对单击进行类似的操作，那么将是COOL (http://www.urbandictionary.com/define.php?term=cool)；并将当前的函数组织得非常整洁，就像每次单击时显示的一样，这样就可以轻松地按每点添加函数；并更新每次单击发生的情况。

$(document).ready(function(){
//Slides object with a time (integer) and a html string
var slides = {
0: "This is the first subtitle. You can put html in here if you like",
4: "A fluffy thing eating some grass.",
12: "Oh look it's a castle on a hill. Nice",
23: "Some horses",
34: "Wow look at those woolly sheep eating grass.",
40: "For more information on this plugin visit github/owainlewis or email owain@owainlewis.com",
50: "Cuepoint.js is an open source plugin for adding subtitles and cue-points to your HTML5 video"
}

Answer 1

我猜您应该做些什么才能让您的函数按正确的顺序执行/单击n次之后，您可以执行以下操作：

首先，不要将对函数的引用存储在数组中，而是将它们存储在散列中，如下所示：

    var a1_Events = {
      1: function1, 
      3: function2, 
      7: function3, 
      12: function5, 
      20: function6, 
      23: function7, 
      30: function8
    },
    a1_c = 0;

将数字设置为函数应执行的单击量。然后，在单击处理程序中添加al_c中的单击计数：

    $('#area1').click(function () {
      al_c++;
      if (a1_Events[al_c] !== undefined) {
        al_Events[al_c]();
      }
    });

基本上，您增加了单击计数，然后尝试查找哈希中是否有与单击量相对应的函数，如果您执行该函数的话。

使用此解决方案，您可以轻松地将函数添加到哈希中，如下所示：

al_Events[33] = function12;

并将其移除：

delete al_Events[3];

希望这能解决你的问题。