javascript - 如何在等待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 调用之后的任何内容。回调保证在服务器返回响应后执行。