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重绘。

到目前为止，没有任何工作。如果没有将我长期运作的过程转移到新的视野，我还能做些什么吗？我知道这些问题与js是单线程有关，但由于chrome是可以的，我认为可能有一个解决方案。感谢。

Answer 1

首先我的常用说明： JavaScript 不是单线程的。只是在浏览器上，只有一个主要的UI JavaScript线程。但JavaScript，这种语言，在线程概念上几近无声，并且可以（并且已经）在其他环境中以多线程方式实现。

有些浏览器也使用相同的UI线程来处理非JavaScript任务，看起来spin.js要么依赖JavaScript（因为它涉及关键帧的东西），要么受主UI线程忙碌的影响。

解决方案是尽可能将长时间运行的函数从主UI线程移动到web worker。这有很多原因，尤其是当工作人员正在开展工作时，您的UI仍然保持响应。

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

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

1 个答案: