Ajax-call sync vs async?

Question

我有一个问题，经过几个小时的搜索，当我偶然发现可以将ajax调用的异步选项设置为false时，我解决了这个问题。我的代码现在完全按照我的预期工作，但我想知道我的解决方案是否良好，或者是否可以以更好的方式解决。如果我的解决方案不好，你为什么这么认为？异步与同步，什么是最好的？是否应该始终努力尽可能多地使用异步调用？

var pageIndex = 0;
(function () {
GetData();
$(window).scroll(function () {
if ($(window).scrollTop() ==
$(document).height() - $(window).height()) {
GetData();
}
});
})();
$.ajax({
type: 'GET',
url: '/Blog/GetPostsByBlogId',
data: { "id": @Model.First().ReqBlog.Id, "pageindex": pageIndex },
dataType: 'json',
success: function (response) {
DisplayData(response);
},
beforeSend: function () {
$("#progress").show();
},
complete: function () {
$("#progress").hide();
},
error: function (response) {
alert("Error while retrieving data!");
}
});

在成功中，我调用以下函数：

function DisplayData(response)
{
if (response != null) {
$.each(response, function (i, post) {
$.ajax({
async: false,
url: "/Blog/GetPostPartialView",
data: post,
type: "POST",
success: function (response) {
$("#posts-container").append(response);
}
});
});
pageIndex++;
}
}

如果没有"async： false"，则每次刷新的数据将以随机顺序显示。使用"async： false"，数据每次都以正确的顺序显示。

编辑：

我使用以下解决方案来避免使用异步：false。

我的 DisplayData 函数现在如下所示：

function DisplayData(response)
{
if (response != null) {
$.each(response, function (i, post) {
$('#posts-container').append($('<div>').load("/Blog/GetPostPartialView", { Id: post.Id, Title: post.Title, Body: post.Body, Created: post.Created, Updated: post.Updated, Views: post.Views, Blog: post.Blog, Tags: post.Tags, Comments: post.Comments, Author: post.Author }));
});
pageIndex++;
}
}

Answer 1

async: false是可怕的做法。这是一个糟糕的解决方案，在极少数情况下它是有效的。事实上，它是如此糟糕，以至于如果您检查控制台，您会看到一个浏览器警告，告诉您不要使用它。

关于订单随机化的问题，这是因为循环中的 AJAX 请求都在不同的时间完成。要解决此问题，您应该删除async: false，然后：

1. 在客户端上将返回的数据整理在一起，然后在显示之前手动sort()。

2. 更改服务器代码，以便在单个 AJAX 调用中传递所有数据，然后可以按正确的顺序返回所有必需的信息。

第二种选择是迄今为止更好的解决方案，因为它还可以避免由于您当前正在淹没的(N 篇博客文章 + 1(请求而发生的服务器 DDOS-ing。

Answer 2

async=false 属性将导致阻塞 JavaScript 代码流的执行，这通常是非常糟糕的做法。使用 ajax async=true 时，无法确定多个 ajax 调用的顺序。如果在服务器端无法执行任何操作，则可以将回收的数据收集到客户端的数据结构中，并根据需要进行排序。您还可以在完成以前的 ajax 调用时调用即将进行的 ajax 调用。这样，您可以按照发送 ajax 请求的顺序获得结果。