在不阻塞页面加载的情况下发出 ajax 请求答案

【问题标题】：Making an ajax request without blocking page load在不阻塞页面加载的情况下发出 ajax 请求
【发布时间】：2011-07-04 10:41:30
【问题描述】：

我需要在页面加载时进行非常慢的 ajax 调用。问题是在 chrome 中，选项卡上的小圆圈一直在旋转，直到 ajax 调用完成。在 Firefox 4 和 IE9 中，它按预期工作。

目前我正在使用

$(document).ready(function () {
   $.doTimeout(1000, slowRequest);
});

超时有帮助，因为它允许浏览器继续，如果浏览器在超时之前完成一切都很好，但我发现根据客户端/服务器的速度有多慢，超时可能不够长。

有没有更好的方法来实现这一点？

【问题讨论】：

【解决方案1】：

老实说，我认为您不应该关心浏览器上的旋转圆圈，而应该关心代码的执行顺序。我会这样做：

$(document).ready(function () {
   slowRequest();
});

或者，setTimeout(slowRequest, 0);，重点是在您已经有了要发送的数据以及在哪里接收数据时开始您的 ajax 请求。

使用 1 秒的延迟，您可以避免在某些浏览器中旋转，但会牺牲时间（延迟 1 秒！）。我认为执行时间比视觉细节更重要。

当然，您的 ajax 请求必须是异步的（我希望是），否则浏览器会挂起。

希望这会有所帮助。干杯

【讨论】：

【解决方案2】：

既然您提到了 Chrome 发生的问题，在包含进行慢速 AJAX 调用的代码的 script 标记上，您可以尝试像这样添加 async 属性：

<script type="text/javascript" async="async">
...
</script>

我相信该属性适用于 Firefox 3.6+ 和 Chrome，但不适用于任何其他浏览器 :(

【讨论】：

不幸的是，这没有帮助。顺便说一句，根据developer.mozilla.org/En/HTML/Element/Script，“它对内联脚本没有影响（即，没有 src 属性的脚本）”所以你的例子实际上不起作用。
我的错误。祝你好运解决这个问题:)