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

Question

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

1. 需要在 ajax 调用之前运行的代码（准备 json 对象到服务器）
2. 需要在 ajax 调用返回后运行的代码（使用从服务器发回的内容）
3. 需要在用户按下按钮和一切完成之间运行的代码。此代码不需要返回的 json 对象。

在进行 ajax 调用之后和结果返回之前运行第 3 组中的代码以获得最佳用户体验和性能是理想的。

这个可以吗？

怎么做？

Answer 1

很简单：

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);
}());

警报的顺序为1、3、2。 setTimeout 不会同步调用它的回调，因为它依赖于等待指定的时间过去，所以即使没有时间过去，它仍然必须等待当前函数完成才能继续。

Answer 2

在响应客户端事件或在任何其他情况下执行 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 之后立即执行任何操作，然后再调用回调。回调保证在服务器返回响应后执行。