使用侦听器为 javascript 异步运行

Question

我有两个函数，名字是Function3，Function4，Function3会通过ajax发送请求到服务器端获取jsondata，但是大概需要3秒左右才能完成。 Function4 是一个普通函数，它会等待 Function3 的结果然后执行。 我的代码如下：

  function ajaxRequest(container)
  {
    $.ajax({
        url: "Home/GetResult",
        type: "post",
        success: function (data) {
            container.append(data.message);
        }
    });
  }

  var eventable = {
    on: function (event, cb) {
        $(this).on(event, cb);
    },
    trigger: function (event) {
        $(this).trigger(event);
    }
}

var Function3 = {
    run: function () {
        var self = this;
        setTimeout(function () {
            ajaxRequest($(".container1"));
            self.trigger('done');
        }, 500);
    }
}

var Function4 = {
    run: function () {
        var self = this;
        setTimeout(function () {
            $(".container1").append("Function4 complete");
            self.trigger('done');
        },500);
    }
}

$.extend(Function3, eventable);
$.extend(Function4, eventable);

Function3.on('done', function (event) {
    Function4.run();
});

Function4.on('done', function () {
    $(".container1").append("All done");
});

Function3.run();

但现在的问题是，当我启动代码时，它总是显示结果为：首先会出现“Function4 complete”，然后是“All done”，3秒后，会出现“Function3 complete”。 这出乎我的意料，因为我的预期是“Function3 complete”排在第一位，“Function4 complete”排在第二位，“All done”预计排在最后。

有人可以帮我解决这个问题吗？谢谢你的建议。

编辑：
我现在已经包含了上面的所有功能。
此外，您可以检查 JSFiddle 中的 js 脚本：http://jsfiddle.net/sporto/FYBjc/light/
我已将 JSFiddle 中的函数从常见的数组推送操作替换为 ajax 请求， 然后一切都出乎我的意料。

Answer 1

您需要在Function3() 发出的ajax 请求之后的成功函数中调用Function4()。这样Function4 总是在Function3 之后执行。

我是否可以建议更具暗示性的函数名称:)

我什至认为你不需要所有的超时

Answer 2

Function4 首先完成，因为 ajaxRequest 或 $.ajax 调用是异步的，并且在等待 ajax 回复时代码的顺序将继续。

var Function3 = {
    run: function () {
        var self = this;
        setTimeout(function () {
            ajaxRequest($(".container1")); 
            //code sequence continues on while ajax hasn't replied yet
            self.trigger('done');
        }, 500);
    }
}

当Function3 触发done 时，Function4 现在将运行。并且将追加"All done"，因为所有这些都发生在ajax 有机会回复并运行其success 函数之前。

如果您希望它们是连续的，请在 $.ajax 的成功函数中运行 Function4。 或者，您可以在$.ajax's success 之后向Function3 发送信号。这样，Function3 只有在 AJAX 成功后才会真正“完成”。

编辑：
我们的意思是：

success: function (data) {
    container.append(data.message);
    //here you need to call Function4, to make sure it only runs after Function3's ajax-request has finished
}