如何在进行大量计算时保持 gif 动画运行

Question

我有一个页面，它用 Javascript 进行一些密集且持久的计算。我想要一个加载动画来告诉用户正在进行的进度。我现在有一个动画 gif，但在 Javascript 运行时整个浏览器窗口冻结（并且 gif 不播放）。然后完成后，它就会解冻。计算必须在客户端进行，因此不能在服务器上完成。

有没有办法防止 Javascript 在计算时冻结页面并停止播放动画？

Answer 1

您还可以使用 HTML5 webworkers (Wikipedia) 在后台运行长时间运行的脚本。这就像 JavaScript 的多线程一样。

它可以在除 IE 之外的最新浏览器中运行。

发现一个使用 webworkers 的游戏看看

Answer 2

您可以将工作分成小块，并使用 setTimeout 开始下一次迭代，一旦第一次迭代完成，浏览器就有机会更新用户界面。 （这是因为浏览器使用单线程，所以如果忙于做js就无法做其他事情）

Answer 3

JavaScript 处理是单线程的，因此当您的代码运行时，不会运行其他动画代码。

您需要将处理设置为批量运行。我不知道你在处理什么，但是如果你正在做一些可以轻松划分的事情，那么你可以处理前 N 个项目，然后使用 setTimeout 安排下一个块在几毫秒内运行。这样，您就可以给浏览器时间来完成其他需要完成的事情。

Answer 4

您可能不再需要它，但为了防止其他人在谷歌上搜索它，这里有另一个简单的解决方案：

*注意，只有当这个巨大的脚本执行是由长迭代循环引起时它才会起作用

- 让您的循环类似于this:

function AsyncLoop(i, lastLoop, parameters) {
        setTimeout(function () {
            if (i < lastLoop) {
                //whatever you wanna do here
                window.console.log('iteration ' + i + ': ' + parameters[i].whatevs);

                i++;
                AsyncLoop(i, lastLoop, parameters);
            }
        }, 0);
    }

-然后这样调用它：

AsyncLoop(0, incredblyLongObjectArray.length, incredblyLongObjectArray);

这是一个不使用参数的小小提琴（因此更容易理解），并带有一个函数来检测所需的脚本是否已完成执行：

https://jsfiddle.net/or1mrmer/

Answer 5

如果浏览器冻结，则意味着您正在做一些认真的工作。

解决这个问题的唯一方法是在脚本执行时每秒添加 100 毫秒的睡眠时间。请查看 javascript setInterval() 调用。

Answer 6

即使 JavaScript 被阻塞，CSS3 动画通常也会继续运行（使用 Chrome 40.0 进行测试）。

因此，您可以使用 SpinKit 或 spin.js 以可视化计算正在进行中。

但是，请注意 CSS3 动画的可用性：
caniuse.com
消除 Android CSS 动画迷思

Answer 7

我在此处用一个功能示例（带有简单的进度指示器）回答了这个问题。

它使用“yield”，并且当您只想允许其他进程一个时间片时，使用起来非常简单（并修改现有的 JS 循环），并且它比 Web Worker（我也使用过）更容易设置，特别是如果您已经有一个与全局变量交互的循环。