为什么javascript函数在firefox中可以工作，但在Chrome或IE上却不能工作

Question

我创建了一种方法来启动活动指标，并创建了另一种方法来停止给定指标。 然后在执行耗时的任务时，我先调用start方法，然后再调用stop方法。 呼叫示例如下所示：

// Show loading
viewControllerShowAjax();

// Tasks that take time including large calculations and ajax requests   
app.timeConsumingFunction();

// Hide loading
viewControllerHideAjax();

这适用于firefox ，但不适用于IE或Chrome 。 有解决办法吗？

编辑：以下是我正在使用的功能：

function viewControllerInit() {
    // Other initializations
    ...

    // Initializing the activity indicator; the activity indicator is simply a jqueryui modal view with a spinjs spinner in it.
    $(this.ajaxModalSelector).dialog({
        resizable   : false,
    dialogClass : "no-close ajax",
    autoOpen    : false,
    height      : 500,
    width       : 500,
    modal       : true,
    open: function( event, ui ) {
        $(this.ajaxModalSelector).dialog("open");
            var opts = {
              lines: 12,
              length: 0,
              width: 20,
              radius: 40,
              color: '#000',
              speed: 1.3,
              trail: 50,
              shadow: false,
            };
            this.spinner = new Spinner(opts).spin(document.getElementById("ajax-modal"));
        },
        beforeClose: function( event, ui ) {
            this.spinner.stop();
        }
    });
}
// Opens the jquery ui modal view
function viewControllerShowAjax() {
    $(this.ajaxModalSelector).dialog("open");
}
// Closes the jquery ui modal view
function viewControllerHideAjax() {
    $(this.ajaxModalSelector).dialog("close");
}

编辑：有关该问题的更多信息； 我发现，如果没有为活动指示器调用hide函数，那么它将在耗时的任务完成后显示。 同样，这是IE和Chrome中的行为，但不是Firefox。

Answer 1

可能的原因

这样做不起作用的原因是JavaScript是单线程的。

耗时的函数app.timeConsumingFunction()将阻止UI在Chrome和IE中进行更新。

之所以能够在Firefox中运行，是因为FF具有不同的实现方式，可以让UI事件在两者之间执行（Canary和我认为Chrome也具有实验模式，可以在单独的界面上执行UI更新线）。

通常，浏览器会提示不同的事件，例如绘画事件。 然后逐个遍历并执行此队列。

但是，例如，如果队列条目正在执行耗时功能的上下文，则该队列将没有“呼吸空间”来继续该队列中的其他事件。

那将是执行绘画事件的其他方式，否则将绘画旋转器。 由于被阻止，微调器直到耗时的功能完成才出现。

使用setTimeout的可能解决方案

解决此问题的方法是使用setTimeout或Web Worker setTimeout执行（请参见下面的Web Worker示例）。

例如，您可以尝试执行此操作以查看它是否可以改进当前代码（我很怀疑，但值得尝试，因为它很简单）-由于帖子中没有足够的代码可以实际测试此功能，因此请从理论上考虑。 尝试替换此行：

app.timeConsumingFunction();

与

setTimeout(app.timeConsumingFunction, 0); //or use 11 if no difference

如果这还不够，您将需要进行类似的设置，但要使用函数的内部结构（未显示），如果可能的话，请将其划分为处理不同操作阶段的部分。 骨架示例可能是：

app.timeConsumingFunction = function() {

    var hereIsAvailableToAllParts;

    function part1() {
        // step 1 in time-consuming operation
        setTimout(part2, 0);  //start next part
    }

    function part2() {
        // step 2 in time-consuming operation
        setTimout(part3, 0);
    }

    function part3() {
        // step 3 in time-consuming operation
        ...done or next...
    }
    setTimeout(part1, 0);
}

setTimeout的0参数告诉浏览器在第一次有机会的情况下将该事件排队。 这可能并不总是有效，但是您可以使用大约11毫秒的间隔，该间隔接近最小可用队列片。

通过拆分这样的操作，您将允许浏览器在其之间执行例如绘画事件，从而能够看到微调器。

使用Web Workers的可能解决方案

在不知道您的代码的情况下，我不能说Web工作者在这种情况下是可用的，因为对于这些工作者有一些限制，例如没有DOM访问，没有存储访问等。但是， 对Web工作者的支持非常出色，如果可能的话，我建议使用这种方法您的代码（参考限制）。

但是，如果您进行纯计算，则可以考虑将Web Workers作为选项：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/Performance/Using_web_workers

一个简单的例子：

在您的主脚本中，您可以像这样分配一个Web Worker：

var ww = new Worker(urlToWebWorkerScriptHere);

Web Workers通过消息进行通信，因此我们在“我们”的那一侧监听message事件：

ww.onmessage = function (e) {

    var msg = e.data;

    /// message returned can be anything you like (see next section)
    if (msg === 'Done!') viewControllerHideAjax();
};

Web Worker使用单独的脚本，该脚本可以作为单独的JS文件加载，或者您可以使用一些技巧将其与HTML代码内联（如下小提琴所示）。

该脚本在隔离的上下文中执行，是所有计算发生的地方。 完成后，它表明了我们的主要脚本：

onmessage = function(e) {

    /// you can send any commands you want and call them what you want
    /// for example, I have called the command start

    if (e.data === 'start') {

        /// the time consuming stuff..

        /// when finished, send 'Done!' to main script
        postMessage('Done!');
    }
};

要开始计算，您将执行以下操作：

// Show loading
viewControllerShowAjax();

// Tasks that take time including large calculations and ajax requests   
ww.postMessage('start');

（当工人返回“完成！”消息时，将称呼皮革）。

当然，您可以发送和返回许多消息，例如返回部分结果并触发计算（或操作）的下一部分。

我在下面的小提琴中做了一个简单的演示-注意，即使小提琴中的循环正在进行忙循环/“繁重的工作”，您也可以单击右按钮（在示例中，您还可以看到如何内联Web Worker脚本，而不是单独加载）：

网络工作者演示

但是同样，在没有看到您的工作代码的情况下，我无法确定是否可以使用Web Workers。

无论如何，这应该为如何解决这个问题提供一些指导。