javascript - 如何确保特定的单击事件处理程序在所有其他附加的单击处理程序之后执行？

Question

我有一个元素:

<div id='myButton'>Click Me!</div>

当点击myButton时，将触发任意数量的点击事件处理程序。

例如，可以按以下方式(和顺序)附加以下 3 个事件处理程序:

$('#myButton').click(function() { alert('First function!'); });

$('#myButton').click(function() { alert('Third function!'); });

$('#myButton').click(function() { alert('Second function!'); });

正如您可能从晦涩的警报中看出的那样，事件处理程序的附加顺序不一定是我希望它们触发的顺序。

如何仅在其他两个点击事件处理程序完成后才提醒“第三功能”？

我尝试过的

我尝试通过以下方式使用各个事件处理程序:

$._data($('#myButton')[0], "events" ).click;

但我无法明确引用处理程序的附加顺序(因此 [0] 可能不正确)。

我也尝试过使用 jQuery when但我怀疑我找错了树，因为事件处理程序已经附加，并将按这样的顺序执行，除非我完全删除它。

注意:我不认为这只是指定事件顺序的情况，因为我想最后执行的函数可能不知道稍后要附加的函数，所以我不能据我所知，将事件处理程序作为一个集合来处理。

Answer 1

如果您能够设置特定的命名空间，您可以使用以下代码片段:

$('#myButton').click(function() { alert('First function!'); });
$('#myButton').on("click.last", function() { alert('Third function!'); });
$('#myButton').click(function() { alert('Second function!'); });

var clicks = $._data($('#myButton')[0], "events" ).click;    

$.each(clicks, function(i, evt){
    if(evt.namespace === "last") {
        clicks.splice(clicks.length - 1, 0, clicks.splice(i, 1)[0])
    }
});

--DEMO--