Javascript JS函数按每次单击、计数单击和

我正试图组织我的JS函数，使其整齐地一个接一个地出现。目前,他们都是乱枪乱炸,；与相反，Click=1执行此操作；然后单击=2执行此操作。有什么建议吗？下面是我的JS。完整的演示链接可以在以下位置看到：“”。你可以通过访问我的演示并注意到点击没有按照1、2、3、4等顺序进行，从而了解我的意思

单击钉头，注意“单击3”会突然跳到“单击8”。我正试图这样做，以便我可以很容易地添加功能，每个具体的点击数。第30次点击，最后一次点击，确实很酷，但它必须在第30次点击时发射，而不是像第三次这样的东西，因为它无法达到目的

$(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);
}

在以前的项目中——在视频中定义自定义提示点；我找到了一个解决方案，可以整齐地调用和声明自定义提示点，如下所示；如果我能用点击来做类似的事情，那就太酷了；并组织我当前的功能，使其在每次单击时整齐地显示，类似于我对提示点所做的操作，以便我可以轻松地在每次单击时添加功能；并更新每次单击的结果

$(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"
}

---

我想您应该做些什么来让您的函数以正确的顺序执行/在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];

---

希望这能解决您的问题。

在

功能3

中显示绑定了单击事件的

#区域2

，然后单击

#区域2

触发单击事件。在阅读了你的评论后，我意识到你真正需要的是什么，我编辑了我的答案，看一看，让我知道它是否解决了你的问题problem@intutivepixel非常感谢您的回复！！但是它在您发送的JSFIDLE中看起来是这样的；这些函数不会在页面加载时触发onClick；而且是自动的。这是完全不同的，而且是断章取义的。@1977，是的，提供的jsbin只是关于如何以更健壮的方式使用javascript执行此类任务的概念性说明，它并不意味着是一个完整的解决方案，只是为了展示一种不同的方法。好吧，谢谢你的想法；但是我现在的位置和我写这个问题时的位置完全一样。@1977编辑了我的答案，以反映更多的用例，看一看