javascript - 确保两个处理程序按特定顺序完成

Question

如果我有两个处理程序附加到同一事件，是否有办法确保其中一个处理程序始终先于另一个处理程序完成。

就这个例子而言，我使用超时来模拟长时间操作。但我可以有这样的东西吗:

var change_label = function () {

    var option = $(".selected_option a").text();
    $("li:first span").text(option);

};    


$("#container").on("click", "li", function () {
    var self = $(this);
    var t = setTimeout(function () {
        $(".sel").children("li").removeClass("selected_option");

        self.addClass("selected_option");

    }, 1000);

});



$("#container").on("click", "li", function () {

    change_label();

});

并确保在第一个处理程序应用该类之前，文本不会被更改(由第二个处理程序)？

http://jsbin.com/ayihiv/1/edit

Answer 1

以下是您可能会感兴趣的方法。

jQuery 的 Callbacks实用程序允许您进行一些“松耦合”。换句话说，您可以让 setTimeout 函数刺激一个操作或一组操作，而无需知道这些操作是什么；它们可以在代码中的其他位置指定，唯一的要求是相同的回调队列位于两个代码块的范围内。

这实际上是一种“发布/订阅”模式，尽管我们在这里使用它来执行发布和订阅以外的其他操作。

var cb = $.Callbacks('unique');

$("#container").on("click", "li", function() {
    var self = $(this);
    var t = setTimeout(function() {
        $(".sel").children("li").removeClass("selected_option");
        self.addClass("selected_option");
        cb.fire(self.find("a").text());//<<<<<< stimulate any functions currently in the callbacks list cb, and pass the required text to them.
    }, 1000);
});

var change_label = function(txt) {
    $("li:first span").text(txt);
};
var log_it = function(txt) {
    console.log('Text changed to: ' + txt);
};
var alert_it = function(txt) {
    alert('Text changed to: ' + txt);
};

cb.add(change_label);
//cb.add(log_it);
//cb.add(alert_it);

<强> DEMO 。尝试取消最后两行的注释，您将看到当 1 秒延迟结束时会发生其他事情。