指示处理器大量的JS函数正在运行（GIF spinners不动画） [英] Indicate that processor-heavy JS function is running (GIF spinners don't animate)
问题描述
显示，然后隐藏动画指示器/微调框gifs是一个很好的方式来显示用户他们的行动已经工作，并且发生了一些事情，而他们等待他们的行动完成 - 例如，如果该行动需要加载一些数据从
我的问题是，如果减速的原因是 处理器
在大多数浏览器中， GIF在执行处理器功能时停止动画 >。对于用户，这看起来像东西已崩溃或故障，当实际上它的工作。
- 期望：点击后，动画就会运行。当过程完成后，文本改变（我们通常隐藏指标，但如果我们离开它的例子更清晰）。
- 实际结果：动画开始运行，然后冻结，直到进程完成。这给人的印象是某些东西被破坏了（直到突然意外完成）。
有任何方法表明进程正在运行，如果JS保持处理器忙，不冻结如果没有办法有动画的东西，我将诉诸显示然后隐藏一个静态文本消息说： Loading。 .. 或类似的东西，但动画看起来更活跃。
想知道为什么我使用的代码是处理器密集型，而不仅仅是通过优化避免这个问题：这是一个很多必然是复杂的渲染。代码是相当高效的，但它做的是复杂的，所以它总是对处理器要求很高。它只需要几秒钟，但这足够长，可以阻止用户，有很多研究回来很长时间来显示指标对用户体验有好处。
处理器重功能的gif旋转器的第二个相关问题是，微调器实际上不会显示，直到一个同步集中的所有代码都运行 - 意味着它通常不会显示微调，直到它的时间来隐藏微调。
- JSBIN示例。 / li>
- 我在这里找到的一个简单的修复（在上面的另一个例子中使用）是在
setTimeout（function（）{... }，50）;以非常短的间隔，使它异步。这工作（见上面的第一个例子），但它不是很干净 - 我相信有一个更好的方法。
我确定必须有一些标准的方法来处理器密集加载的指标，我不知道 - 或者也许正常使用加载... 文本与 setTimeout ？我的搜索没有发生。我已经阅读了6或7个关于类似问题的问题，但它们都是无关的。
编辑评论中的一些重要建议，以下是我的确切问题的更多细节：
- 复杂的过程涉及处理大型JSON数据文件（如，在加载文件之后在存储器中的JS数据操作操作），以及基于以下内容渲染包括复杂，详细的可缩放世界地图的SVG（通过Raphael.js）可视化：结果的数据从JSON处理。 如果有必要，我需要支持IE8 可以给予IE8 / IE9用户最小的后退，例如
载入... 文字，并给其他人一些现代的东西。 现在的浏览器现在独立于UI线程运行CSS动画，如果动画是使用变换实现的，而不是通过更改属性。有关这方面的文章，请访问 http://www.phpied.com/css-animations -off-the-ui-thread / 。
例如， http://projects.lukehaas.me/css-loaders/ 用变换实现，并且在UI线程繁忙时不会冻结（例如，该页上的最后一个微调器）。
Showing then hiding animated indicator / spinner gifs are a good way to show a user that their action has worked and that something is happening while they wait for their action to complete - for example, if the action requires loading some data from a server(s) via AJAX.
My problem is, if the cause of the slowdown is a processor-intensive function, the gif freezes.
In most browsers, the GIF stops animating while the processor-hungry function executes. To a user, this looks like something has crashed or malfunctioned, when actually it's working.
JSBIN example
Note: the "This is slow" button will tie up the processor for a while - around 10 seconds for me, will vary depending on PC specs. You can change how much it does this with the "data-reps" attr in the HTML.
- Expectation: On click, the animation runs. When the process is finished, the text changes (we'd normally hide the indicator too but the example is clearer if we leave it spinning).
- Actual result: The animation starts running, then freezes until the process finishes. This gives the impression that something is broken (until it suddenly unexpectedly completes).
Is there any way to indicate that a process is running that doesn't freeze if JS is keeping the processor busy? If there's no way to have something animated, I'll resort to displaying then hiding a static text message saying Loading... or something similar, but something animated looks much more active.
If anyone is wondering why I'm using code that is processor-intensive rather than just avoiding the problem by optimising: It's a lot of necessarily complex rendering. The code is pretty efficient, but what it does is complex, so it's always going to be demanding on the processor. It only takes a few seconds, but that's long enough to frustrate a user, and there's plenty of research going back a long time to show that indicators are good for UX.
A second related problem with gif spinners for processor-heavy functions is that the spinner doesn't actually show until all the code in one synchronous set has run - meaning that it normally won't show the spinner until it's time to hide the spinner.
- JSBIN example.
- One easy fix I've found here (used in the other example above) is to wrap everything after showing the indicator in
setTimeout( function(){ ... },50);with a very short interval, to make it asynchronous. This works (see first example above), but it's not very clean - I'm sure there's a better approach.
I'm sure there must be some standard approach to indicators for processor-intensive loading that I'm unaware of - or maybe it's normal to just use Loading... text with setTimeout? My searches have turned up nothing. I've read 6 or 7 questions about similar-sounding problems but they all turn out to be unrelated.
Edit Some great suggestions in the comments, here are a few more specifics of my exact issue:
- The complex process involves processing big JSON data files (as in, JS data manipulation operations in memory after loading the files), and rendering SVG (through Raphael.js) visualisations including a complex, detailed zoomable world map, based on the results of the data processing from the JSON. So, some of it requires DOM manipulation, some doesn't.
- I unfortunately do need to support IE8 BUT if necessary I can give IE8 / IE9 users a minimal fallback like
Loading...text and give everyone else something modern.
Modern browsers now run CSS animations independently of the UI thread if the animation is implemented using a transform, rather than by changing properties. An article on this can be found at http://www.phpied.com/css-animations-off-the-ui-thread/.
For example, some of the CSS spinners at http://projects.lukehaas.me/css-loaders/ are implemented with transforms and will not freeze when the UI thread is busy (e.g., the last spinner on that page).
这篇关于指示处理器大量的JS函数正在运行（GIF spinners不动画）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
