javascript 如何在进行大量计算的同时保持动画 gif 运行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7300632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to keep animated gif running while doing intense calculations
提问by Seth Carnegie
I have a page which does some intense and long lasting calculations in Javascript. I would like to have a loading animation to tell the user progress is being made. I have an animated gif now, but the whole browser window freezes (and the gif does not play) while the Javascript is running. Then when it's done, it unfreezes. The calculations must be client-side so they cannot be done on a server.
我有一个页面，它在 Javascript 中进行了一些密集而持久的计算。我想要一个加载动画来告诉用户正在取得进展。我现在有一个动画 gif，但是在 Javascript 运行时整个浏览器窗口都冻结了（并且 gif 不播放）。然后当它完成时，它解冻。计算必须在客户端进行，因此它们不能在服务器上完成。
Is there a way to keep Javascript from freezing the page and stopping animations from playing while it's doing calculations?
有没有办法防止 Javascript 在执行计算时冻结页面并停止播放动画？
采纳答案by Mridul Kashatria
You can also use HTML5 webworkers(Wikipedia) to run long running scripts in the background. It is just like multi threading for javascript.
您还可以使用 HTML5 webworkers( Wikipedia) 在后台运行长时间运行的脚本。它就像 javascript 的多线程。
It will work in latest browsers except IE.
它将在除 IE 之外的最新浏览器中工作。
Found a game using webworkers check it out
发现一个使用网络工作者的游戏检查一下
回答by stewe
You could split the work in little small pieces and use a setTimeoutto to begin the next iteration, once the first has finished, that way the browser has a chance to update the user interface. (this is because the browser uses one single thread, so if it is busy doing js it can't do other things)
您可以将工作分成小块，然后使用setTimeoutto 开始下一次迭代，一旦第一次完成，浏览器就有机会更新用户界面。（这是因为浏览器使用了一个单线程，所以如果忙着做js就不能做其他的事情了）
回答by loganfsmyth
Javascript processing is single threaded, so while your code is running, no other animation code will run.
Javascript 处理是单线程的，因此在您的代码运行时，不会运行其他动画代码。
You'll need to set up your processing to run in batches. I don't know what you are processing, but if you are doing something that can be divided up easily, then you can process the first N items, then use setTimeout to schedule the next chunk to run in a few milliseconds. That way, you give the browser time to do other stuff that needs to be done.
您需要将处理设置为批量运行。我不知道你在处理什么，但是如果你正在做一些可以轻松划分的事情，那么你可以处理前 N 个项目，然后使用 setTimeout 安排下一个块在几毫秒内运行。这样，您就可以让浏览器有时间做其他需要做的事情。
回答by Adriano Sudário
You probably don't need it anymore, but just in case anyone else is googling it, here's another simple solution:
您可能不再需要它了，但以防万一其他人在谷歌上搜索它，这是另一个简单的解决方案：
*note that it would only work if this huge script execution is being caused by a long iteration loop
*请注意，只有当这个巨大的脚本执行是由长迭代循环引起时，它才会起作用
-make your loop something like 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);
}
-then call it like:
- 然后这样称呼它：
AsyncLoop(0, incredblyLongObjectArray.length, incredblyLongObjectArray);
Here's a little fiddle without using parameters (so it's easier to understand) and with a function to detect if the desirable script has finished executing:
这是一个不使用参数的小小提琴（因此更容易理解）并带有一个函数来检测所需的脚本是否已完成执行：
回答by Ignitor
CSS3 animations typically continue running even if JavaScript is blocking (tested with Chrome 40.0).
即使 JavaScript 被阻塞，CSS3 动画通常也会继续运行（使用 Chrome 40.0 测试）。
So you can use libraries like SpinKitor spin.jsto visualize that the calculation is ongoing.
因此，您可以使用SpinKit或spin.js 之类的库来可视化计算正在进行中。
However, note the availability of CSS3 animations:
caniuse.com
Dispelling the Android CSS animation myths
但是，请注意 CSS3 动画的可用性：
caniuse.com Dispelling
the Android CSS animation myths
回答by Rok Kralj
If browser freezes, that means you are doing some serious work.
如果浏览器死机，则意味着您正在做一些严肃的工作。
The only way to solve this is to add 100ms of sleep every second of the script execution. Please look at javascript setInterval()call.
解决这个问题的唯一方法是在脚本执行的每一秒添加 100 毫秒的睡眠时间。请查看 javascriptsetInterval()调用。
回答by www-0av-Com
I answered this with a functioning example (with simple progress indicator) here.
我在这里用一个功能示例（带有简单的进度指示器）回答了这个问题。
It uses "yield" and is extremely simple to use (and modify existing JS loops) when you simply want to allow other processes a timeslice, and it is simpler to set up than web workers (which I have used as well), especially if you already have a loop interacting with global variables.
它使用“yield”并且在您只想允许其他进程一个时间片时使用起来非常简单（并修改现有的 JS 循环），并且设置比 web worker（我也使用过）更简单，特别是如果您已经有一个与全局变量交互的循环。
