版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/QTFYING/article/details/79667505
通常 为了减少页面加载时间,先把核心内容显示处理,页面加载完成后再发送ajax请求获取其他数据
这时就可能产生多个ajax请求,为了用户体验,最好是发送并行请求,这就产生了并发问题,应该如何处理?
1)并行改串行
如果业务逻辑和用户体验允许的情况下,可以改为串行,处理起来最简单
function async1(){
//do sth...
}
function async2(){
//do sth...
async1();
}
async2();
2)ajax改成同步
$.ajax({
url:"/jquery/test1.txt",
async:false
});
3)回调计数
var cnt = 0;
function async1(){
//do sth...
callback();
}
function async2(){
//do sth...
callback();
}
function callback(){
cnt++;
if(2==cnt) console.log('都已执行完毕');
}
4)jquery的$.deferred方法
var d1 = $.Deferred();
var d2 = $.Deferred();
function async1(){
d1.resolve( "Fish" );
}
function async2(){
d2.resolve( "Pizza" );
}
$.when( d1, d2 ).done(function ( v1, v2 ) {
console.log( v1 + v2 + '已完成');
});
5)ES6的Promise方法
function a() {
return new Promise(function (res, rej) {
$.ajax({
url: "a",
type: "GET",
async: true,
dataType: "json",
success: function (data) {
console.log(data, "a");
res(data);
}
})
});
}
function b(data) {
console.log(data, "data");
return new Promise(function (res, rej) {
$.ajax({
url: "b",
type: "POST",
async: true,
data: JSON.stringify(data),
dataType: "json",
success: function (data) {
console.log(data, "b");
res();
}
})
});
}
$("#btn").click(function () {
a().then(function (data) {
b(data);
}).then(function () {
})
})