多个异步请求执行顺序问题。

最新推荐文章于 2024-10-17 16:51:36 发布

原创最新推荐文章于 2024-10-17 16:51:36 发布 · 5.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax

Ajax 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用回调函数实现多个异步请求的顺序执行，并举例说明了如何确保异步操作之后的普通操作能够正确地依赖于异步操作的结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情景一：

多个异步请求，伪代码：

Ajax1();
Ajax2();
Ajax3();

这三个Ajax请求并不存在执行顺序，也就是2和3并不会等第一个Ajax请求完成再去执行，而是直接执行如果想要达到顺序执行的效果，可以通过回调函数来完成，伪代码：

$.ajax({
url:"servletURL",
type:"post",//get
data:{},
dataType:"json",
success:function(data){
$.ajax({
url:"servletURL",
type:"post",//get
data:{},
dataType:"json",
success:function(data){
$.ajax({
url:"servletURL",
type:"post",//get
data:{},
dataType:"json",
success:function(data){}
});
}
});
}
});

这样的话，三个异步请求就会按顺序执行。绿->红->蓝。

情景二：

异步之后是普通操作：

var catName = "";
$.post("/item/cat/catName",{catId:data.cid},function(data){
    catName = data;
    },"text");
node.after("<span style='margin-left:10px;'>" + catName + "</span>");

对于上面的JS代码，是没有意义的，也就是说是错误的，原因就在于，位于异步请求下面的代码并不会等待异步请求完成之后再执行，而是会直接执行。

所以想要上面的代码有效，应该这样写：

var catName = "";
$.post("/item/cat/catName",{catId:data.cid},function(data){
    catName = data;
    node.after("<span style='margin-left:10px;'>" + catName + "</span>");
},"text");