有没有一种方法可以在启动同步ajax调用之前强制执行javascript代码

Question

我真的不知道我在做什么错。 我有一些像这样的javascript（使用jQuery）：

function myFunc(){
    $('.wait').addClass('waiting');
    console.log('wait');
    var r = $.ajax({type: "GET", url: "my_URL", async: false}).responseText;
    $('.wait').removeClass('waiting');
    console.log('stop wait');
    return r;
}

我的问题是在执行此调用时未添加类“ waiting” ...我的意思是，当我调用函数时，我得到了一个div，该div应该出现在开头，然后在之后删除，但是没有出现。 一切似乎都在相应地进行。 当我尝试不使用ajax调用执行结果时，得到了ajax调用的结果

$('.wait').removeClass('waiting');

我的div出现了， 但是直到我收到ajax响应之后 ……我试图为请求计时，大约需要2秒钟 ……所以我真的不知道为什么会这样。

可能与同步ajax调用有关吗？ 由于JavaScript是一种过程语言，因此我认为应该在登录控制台之前和开始ajax调用之前完成类的添加，但是我在获得响应后进行了所有修改（即使在JavaScript控制台中，所有内容也会附加在ajax调用之后）。

任何帮助都将非常好！

Answer 1

在这里，您可以使用异步版本。 您应该传递将以结果提示方式调用的回调函数。 在给定的情况下， return data是错误的。

function myFunc() {
    $('.wait').addClass('waiting');
    console.log('wait');
    var r = $.ajax({
        type: "GET",
        url: "my_URL",
        async: true,
        success: function (data) {
            $('.wait').removeClass('waiting');
            console.log('stop wait');
            return data;
        }
    })
}

Answer 2

函数运行时，浏览器中什么也没有发生，因此您需要使用异步代码，以便浏览器可以更新元素。 浏览器有机会更新后，可以使用setTimeout方法运行其余代码。

由于代码是异步的，因此无法从函数返回值，因为该函数在进行AJAX调用之前就已存在。 使用回调函数获取值：

function myFunc(callback){
  $('.wait').addClass('waiting');
  window.setTimeout(function(){
    var r = $.ajax({type: "GET", url: "my_URL", async: false}).responseText;
    $('.wait').removeClass('waiting');
    callback(r);
  }, 0);
}

由于必须使用异步代码来更新元素，因此也可以使AJAX调用异步，这可以防止浏览器在请求期间无响应：

function myFunc(callback){
  $('.wait').addClass('waiting');
  $.ajax({type: "GET", url: "my_URL", success: function(data){
    $('.wait').removeClass('waiting');
    callback(data);
  }});
}