javascript - Ajax 异步回调 beforesend

Question

我正在执行以下 ajax 调用:

def myfunction(var1, var2){
b1. $.ajax({
        url: 'some_url2',
        type: "POST",
        data: {'mydata': var1, 'mydata2': var2},
        success: function (data) {
b2.        document.getElementById("successMessageAlert").style.display = "none";
        },
        error: function(xhr, errmsg, err) {
            alert('error1 occurred');
b3.  }
}

def function1() {
    $.ajax({
        url: 'some_url',
        type: "POST",
        data: formData,
        success: function (data) {
            var aData = JSON.parse(data);
b4.         myfunction(getCookie('selected_Id'), aData);
b5.         document.getElementById("successMessageAlert").style.display = "block";
b6.         document.getElementById("successMessageText").innerHTML = "<strong>Success!</strong> The encoding record was saved successfully.";
            }
        },
        error: function (xhr, errmsg, err) {
            alert('error occurred')
        }
    });
}

我还为 csrf 使用了以下代码:

$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

问题是 myfunction 之后的语句在 myfunction 之前执行。因此，“successMessageAlert”会在再次隐藏之前短暂出现。

我使用了一些断点 (b1-b6)。以下是它们的执行顺序:

1. b4
2. b1
3. b3
4. b5
5. b6
6. b2
7. b3

根据阅读几个相关的 SO 帖子，我知道这个问题必须与 ajax 调用的异步性质、beforesend 函数和回调有关，但我无法将 2 和 2 放在一起.请帮忙。

PS:我需要更改帖子的标题。但是我无法简洁地描述这个问题。

Answer 1

实际上，执行流程是绝对正确的。我不认为它与 beforeSend 有任何关系 现在您需要了解 JavaScript ajax 调用的本质。 Ajax 调用本质上是异步。

异步 意味着每当执行 ajax 调用时，JavaScript 不会等待调用完成并移至下一行代码。

例如在你的情况下

在 b1 代码移动到 b3 之后 --> 因为 JavaScript 不等待调用完成

现在的问题是什么时候执行b2。

这取决于网络流量，一旦 ajax 调用完成，就会执行 b2 代码。

如何处理这些情况:

有两种方式

a) 我不会建议这样做，即使用 async:false 作为 ajax 调用中的参数。当这个参数在 ajax 调用中给出时，它告诉 JavaScript 等待

b2 而不是继续 b3。

为什么我不建议这样做

调用是同步的，即如果您的请求需要 3 秒才能完成，那么您的网站将在 3 秒内无响应。

b) 第二种方法使用回调:

这个有点复杂，但却是最好的方法。

首先你需要识别依赖于ajax调用完成的代码，你可以将所有代码放在一个函数中并在ajax调用完成后执行它

例子如下:

    def myfunction(var1, var2 , callback){
     $.ajax({
            url: 'some_url2',
            type: "POST",
            data: {'mydata': var1, 'mydata2': var2},
            success: function (data) {
            document.getElementById("successMessageAlert").style.display = "none";
            callback(); //execute the passed function now
            },
            error: function(xhr, errmsg, err) {
                alert('error1 occurred');
      }
    }  





      def function1() {
        $.ajax({
            url: 'some_url',
            type: "POST",
            data: formData,
            success: function (data) {
                var aData = JSON.parse(data);
                     myfunction(getCookie('selected_Id'), aData ,function(){

                          //Code will get executed after ajax call completes

                         document.getElementById("successMessageAlert").style.display = "block";
                         document.getElementById("successMessageText").innerHTML = "<strong>Success!</strong> The encoding record was saved successfully.";          
                     });
                }
            },
            error: function (xhr, errmsg, err) {
                alert('error occurred')
            }
        });
    }