Ajax 调用同步与异步？

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”，数据每次都以正确的顺序显示。

编辑：

我使用以下解决方案来避免使用 async: 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 请求的顺序获得结果。