javascript - 处理大文件时的jQuery throbber

Question

在我的网络应用程序上，用户可以生成一个有时会变得非常大的 10+ Mb 的 CVS 文件。该报告显然可能需要一些时间来生成。我想在生成报告时为用户显示一个 throbber，一旦提示他们保存/运行，我希望 throbber 隐藏。这可能吗？

Answer 1

不，实际上不可能检测到文件何时到达并用户保存它。您几乎只能更新您的 throbber 并在他们准备好继续时提供继续链接。

如果这是可能的，那么当您在文件的登录页面完成时，下载站点将使用它自动将您转发到下载列表。

Answer 2

我猜您正在发布一些数据，在服务器上生成 CSV，设置内容类型并等待浏览器的保存对话框出现。正确的？

在那种情况下，我想你会失望的。我花了很多时间试图找到会在这种确切情况下触发的事件，但我无法弄清楚。我终于不得不做一些复杂的事情，比如使用 XHR 来轮询文件创建的状态。一旦我得到了我想要的回应，我就隐藏了 throbber 并请求了 CSV。

为了更清楚：

• 显示颤抖者
• 使用 XHR 告诉服务器开始生成 CSV
• 使用 XHR 轮询 CSV 创建的状态
• 文件创建完成后：
  • 将不可见的 iframe 添加到指向新创建的 CSV 的文档中，并让服务器向其中添加 content-disposition 标头。
  • 在短暂的延迟后隐藏 throbber（您可以尝试计时，以便在显示文件保存窗口之后隐藏 throbber，但在用户与窗口交互时）。您还可以检测到窗口模糊事件以隐藏 throbber，但我很确定这不会很可靠。

Answer 3

是的，JavaScript 中的繁重操作通常被分成块，然后从 setInterval 调用。超时可防止页面冻结。

var csvTxt = "";
var isDone = false;
addPart = function(){
    csvTxt += addTextFromLongCalculation();
    if(csvTxt > 10000000) isDone = true; // this is an arbitrary example
}

var handle = setInterval(function(){
   addPart();
   if(isDone){
        clearInterval(handle);
   }
}, 20);