前端ajax回调更新,【Web前端问题】同步ajax请求后的方法和该请求回调方法的执行顺序？...

如题，示例代码：

$.ajax({

url:'test',

async:false,

success:function(){

console.log('callback');

}

});

console.log('test');

这两个输出的顺序我在chrome下测试是callback test，为什么会是这样的结果？

回答：

我认为这里不能单纯按照同步和异步的区别去回答这个问题，而应该是要去理解浏览器调用这个API的工作原理。

当ajax为异步请求时，浏览器会利用区别于(javascript与UI共享的)主线程的另外一条线程去执行这个请求发送，不影响主线程的执行，此时浏览器的针对这段代码的工作就不局限于一条线程。而当请求响应完成后，就会将回调函数推到浏览器工作中的回调队列里去，等待调用栈为空(调用栈为空的时候，test已经被输出到console中)的时候才去执行对应的对调函数，这种工作原理也称为事件轮询。因此，上面代码在异步的情况下，代码的运行结果应该是test callback。

而当ajax为同步请求时，浏览器便不再额外为请求发送申请另外一条线程，而是直接用主线程去执行这项任务，这就意味着当请求发送未响应返回的期间，javascript以及UI均遭到阻塞，导致页面卡顿的现象。首先，我们来看一下下面的代码：

var ajax = function(options) {

var xhr;

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

} else { //for IE6

xhr = new ActiveXObject('Microsoft.XMLHTTP');

}

xhr.onreadystatechange = function() {

callback(xhr, {

success : options.success,

});

}

xhr.open(options.type, options.url, options.async);

if (options.type.toUpperCase() === "POST") {

xhr.setRequestHeader("Content-type","application/json");

}

if (typeof options.data !== "undefined") {

xhr.send(options.data);

} else {

xhr.send();

}

return xhr;

}

此时因为ajax为同步，在请求响应返回的过程中，javascript仍停留在ajax({})这行API调用的代码中，当响应返回时，javascript运行所到达的位置是上面xhr.onreadystatechange的回调函数中，也就是楼主的console.log(callback)所在的函数中。执行完相关的回调函数之后，javascript才会继续执行ajax({})的下一行代码。

因此也就有了楼主如此的结果。

回答：

谢邀， 输出顺序跟你想的不一致的原因，是因为你主动设置了异步变同步，那么就意味着你要按照代码顺序来执行，自然是先 callback， 后 test。

而且官方也提到了这个api 被废弃了。

As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated

那么也说说大概的原理，jquery 会锁死整个浏览器，直到回调执行完毕为止，也就是说这个时候，浏览器不会干任何事情，现在你使用这个方式，chrome 会给你警告的。你可以看看。

回答：

因为 async: false 这是同步加载了

回答：

async: true

回答：

因为你设置了 Ajax 的请求为同步的方式， async:false这段代码表示将异步设置为 false。所以他会先完全执行完上面的那段代码，再执行接下来的代码。

你将 async:true，他就会先输出 test 然后输出 callback。

回答：

async:false 代表使用同步方式请求，也就是说ajax完成之前下面的所有程序都处于等待状态。尽量不要用同步，太阻塞。

回答：

async: false 将ajax请求设为同步了，我记得以前用的时候火狐和IE都会提醒一个警告，意思大概是提示谨慎使用，可能会失效一类的。

回答：

async:false

你这里设置为同步了，必须等待ajax完成才能下一步，所以会callback test