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”将出现。<登记/> 这是出于我的考验，因为我的预期是“功能3完成”，“功能4完成”排在第二位，“全部完成”预计为最后一位。

任何人都可以帮我这个吗？ thx in advice。

修改
我已经包含了上面的所有功能。
另外，您可以在JSFiddle中查看js脚本：http://jsfiddle.net/sporto/FYBjc/light/
我已经将JSFiddle中的函数从常见的数组推送操作替换为ajax请求，然后所有事情都耗尽了我的期望。

Answer 1

您需要从Function4()生成的ajax请求后面的success-function中调用Function3()。这样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。或者，您可以在Function3之后发出$.ajax's success信号。这样，在AJAX成功之后，Function3才会真正“完成”。

修改
我们的意思是：

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 }

使用侦听器为javascript运行异步

2 个答案: