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

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

的情况下执行它时，我得到了我的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);
  }});
}

有没有办法在启动同步ajax调用之前强制执行javascript代码

2 个答案: