如何为冻结屏幕启用进度栏/加载图标？

问题描述

我有一个网络应用，可加载一个csv文件以在应用中查看。我尝试加载一个大文件，它冻结了屏幕一段时间，然后最终加载了csv文件并显示了csv内容。我在文件输入按钮上有一个正在旋转的加载图标，它也会冻结并停止旋转，直到屏幕解冻为止。

我发现jQuery具有延迟对象，可以保留承诺并在以后解决。我可以使用此方法（递延）来保持屏幕正常，然后在文件完成解析后立即解决它，并且加载图标可以旋转动画，直到文件加载完毕。通过此解决方案，我还可以使用进度条吗？

这里有一些解析csv文件的功能，可能会导致屏幕冻结。

我有$.each(ARRAY,function());个函数，并且大多数都是ARRAY.forEach();个，并且需要向这些解析函数添加预加载器和延迟的Promise对象。我也使用papa.parse() JavaScript库。无论如何编写这些功能的脚本以允许解冻屏幕？

解决方法

简短答案： Web Worker。

详细答案：

从技术上讲，您可以使CSV解析功能async然后撒入await new Promise(setTimeout);以防止其阻塞。但这将使解析时间更长。

最好的解决方案是使用Web Worker解析CSV。这样可以将工作转移到与主线程不同的线程上，而不会导致任何冻结。