如何在等待ajax回调时运行javascript

时间:2012-11-17 01:18:50

标签: javascript ajax json jquery

我正在对服务器进行ajax调用。我需要运行的代码可以分为3组。

  1. 需要在ajax调用之前运行的代码(准备json对象进入服务器)
  2. 在返回ajax调用后需要运行的代码(使用从服务器发回的内容)
  3. 需要在用户按下按钮的时间和完成所有操作的时间之间运行的代码。此代码不需要返回的json对象。
  4. 在进行ajax调用之后以及返回结果之前,最好在第3组中运行代码,以获得最佳用户体验和性能。

    可以这样做吗?

    如何?

2 个答案:

答案 0 :(得分:9)

非常简单:

function someFunction() {
    //1. code that needs to run before ajax
    $.ajax({...}).done(function () {
        //2. code that needs to be run after the ajax call has returned
    });
    //3. code that needs to be run between the time the user presses
    //   a button and the time everything is done.
}

这是有效的,因为JavaScript在执行中是同步的(除非正在使用工作者,但这与此特定问题无关)。第一个代码将运行,然后ajax调用将告诉浏览器启动XHR请求,但someFunction尚未完成,因此它将继续同步执行。

完成someFunction后,控制流将打开发生的任何异步事件,最终导致done回调。

公平地说,异步的面向事件的编程对于大多数人来说并不容易。很容易忘记在什么时间发生什么代码。

以下是异步行为如何工作的易于执行的示例:

(function () {
    alert(1);
    setTimeout(function () {
        alert(2);
    }, 0); //note the 0ms delay
    alert(3);
}());

提醒的顺序为132setTimeout不会同步调用它的回调,因为它依赖于等待指定的时间量,所以即使没有时间过去,它仍然必须等待当前函数完成才能继续

答案 1 :(得分:0)

在对客户端事件或任何其他方案做出反应时执行ajax调用允许您指定回调中的代码以及在创建ajax代码后立即执行的代码(不在回调中)。

示例:

// Code before the ajax call is made
$.ajax({
    params, //other key values such as data
    success: function (data) {
       // one of the possible callbacks
    }
});
// Code executed immediately after ajax call is performed
// This is executed before or after the callback is complete
// In most cases it's before

所以在进行ajax调用之前执行的任何操作都保证在之前执行。在调用回调之前,几乎可以保证在ajax调用之后立即执行任何操作。保证在服务器返回响应后执行回调。