spin.js 在 IE 和 FF 上的长运行线程期间停止旋转

Question

我的代码：

$(document).ready(function () {
    $("#divContent").hide();
    $("#divProcessing").spin();

    $("#divProcessing").show();

    setTimeout(function () {
        Longrunningfunction1
        Longrunningfunction2
        Longrunningfunctionn

        //All done
        $("#divProcessing").hide();
        $("#divContent").show();
        $("#divContent").style = "margin-top:60px;height:100%;display:''";

        $("#tabbed-nav").data('zozoTabs').refresh();
    }, 0);
});

使用上面的 SetTimeout，我设法让 Processing div 正常运行，即显示，然后在一切完成时隐藏和显示 Content div。问题是在 IE 和 FF 中，微调器会在一段时间后停止旋转。在 Chrome 中，它运行完美，微调器继续运行。

我试过：

强制重绘处理 div
使用不同的 js 微调器（比 spin.js 更糟糕的行为 - 它们从未出现）
使用 css3 动画代替 spin.js（从不制作动画）
额外的设置超时
setintervals 尝试让 ui 重绘。

到目前为止没有任何效果。除了将我的长运行进程移动到新视图之外，还有什么我可以做的吗？我知道这些问题与 js 是单线程有关，但由于 chrome 没问题，我认为可能有解决方案。谢谢

Answer 1

首先我要注意：JavaScript 不是单线程的。只是在浏览器上，只有一个 UI JavaScript 主线程。但是 JavaScript 这种语言几乎对线程的概念保持沉默，并且可以（并且已经）在其他环境中以多线程方式实现。

一些浏览器也使用相同的 UI 线程来执行非 JavaScript 任务，看起来 spin.js 要么依赖于 JavaScript（因为它会说话关于关键帧的东西）或者受到主UI线程繁忙的影响。

解决方案是，如果可能，将长运行函数从主UI 线程移到web worker 中。这有很多好处，尤其是您的 UI 在 worker 工作时保持响应。

网络工作者在现代浏览器中是well supported，但在 IE8 或 IE9 和 v4.4.4 之前的 Android 浏览器中不是。

spin.js 在 IE 和 FF 上的长运行线程期间停止旋转

spin.js stops spinning during long running thread on IE and FF

javascript

jquery

spin.js

spin.js 在 IE 和 FF 上的长 运行 线程期间停止旋转

spin.js stops spinning during long running thread on IE and FF

javascript

jquery

spin.js

spin.js 在 IE 和 FF 上的长运行线程期间停止旋转