我真的不知道我做错了什么。我得到了一些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调用之后)。
任何帮助都会很好!
函数运行时浏览器中不会发生任何事情,因此需要使用异步代码以便浏览器可以更新元素。您可以使用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);
}});
}
async版本。您应该传递回调函数,该函数将被调用并考虑结果。在特定情况下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;
}
})
}