处理大文件时的 jQuery throbber

Question

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

Answer 1

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

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

Answer 2

是的，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);

Answer 3

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

那样的话，我想你会失望的。我花了相当多的时间试图找到适合这种情况的事件，但我无法弄清楚。我最终不得不做一些复杂的事情，比如使用 XHR 来轮询文件创建的状态。一旦得到我想要的响应，我就隐藏了 throbber 并请求 CSV。

更清楚地说：

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