javascript - 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 中，它运行完美，微调器继续运行。

我试过:

• 强制重绘 Processing div
• 使用不同的 js 微调器(比 spin.js 更糟糕的行为——它们从未出现过)
• 使用 css3 动画代替 spin.js(从不制作动画)
• 额外的设置超时
• setintervals 以尝试让 ui 重绘。

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

Answer 1

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

一些浏览器也将相同的 UI 线程用于非 JavaScript 任务，看起来 spin.js 要么依赖 JavaScript(因为它谈论关键帧的东西)，要么受到主 UI 线程繁忙的影响。

解决方案是将长时间运行的函数从主 UI 线程移到 web worker 中。如果可能的话。出于多种原因，这很好，尤其是当工作人员执行其工作时，您的 UI 会保持响应。

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