jQuery POST 在处理用户与锚点的交互之前等待响应

Question

假设我有一个简单的 jQuery POST 脚本：

$(document).ready(function () {
    $.post("post-data.php")
        .done(function (data) {
            // Done function
        }).fail(function () {
            // Fail function
        });
});

假设我有这个 HTML：

<div id="page">
    <a href="link.php">Some link</a>
    <div id="jquery-data-response"></div>
</div>

如果 post-data.php 在 10 秒后返回数据，而我在 10 秒内点击“Some link”，则在 jQuery POST 请求完成后会加载页面“link.php”，因此用户必须等待最多 10 秒。

这也适用于 jQuery GET 请求。

现在我有两个问题。

1. 问题出在哪里？是服务器问题（假设脚本已经完全优化并且不能超过 10 秒，它也发生在带有 XAMPP 的 localhost 上）、jQuery 问题（缺少处理用户交互的函数？）还是浏览器问题（Chrome 是否必须等待所有请求都得到处理？）？
2. 是否有可能解决这个问题（以及如何解决）？

Answer 1

问题出在哪里？

当前的问题是如何独立于请求管理交互。如果您不希望有人在请求完成之前点击链接，那么您应该对其进行管理，直到它完成为止。

例如，在您的代码中声明一个标志，以确定您的请求是否已得到解决。默认为false。然后运行您的 ajax 查询。成功后，它会将requestComplete 设置为true。

let requestComplete = false;

$.post("post-data.php")
  .done(function (data) {
    // this will prompt your listener to allow native execution
    requestComplete = true;
  })
  .fail(function () { ... });

将侦听器绑定到您的链接，该侦听器仅在标志为true 时才允许交互。事件处理程序的返回值决定了默认浏览器行为是否也应该发生。在点击链接的情况下，这将跟随链接。

$(document).on('click', '.link', function (event) {
  return requestComplete;
});

因此您的标记将如下所示：

<div id="page">
  <a href="link.php" class="link">Some link</a>
  <div id="jquery-data-response"></div>
</div>

要演示阻止浏览器默认行为，请探索this fiddle。