javascript - DOM 样式改变等待暂停

Question

调用此函数时，“gif”元素上的样式更改不会显示，直到“lotsOfProcessing()”完成。但是，当我取消注释警报(“测试”)时，样式更改会在弹出警报之前显示。

我想要做的是在 lotsOfProcessing 运行时显示动画 gif。这似乎是非常直接的解决方案，但显然行不通。有什么建议/解决方案吗？

function nameOfFuntion()
    {
        document.getElementById("gif").style.display = "inline";
        //alert("test");
        lotsOfProcessing();
    }

Answer 1

JavaScript 代码与浏览器的渲染在同一个线程上执行。 所有需要绘制的东西都等待 JavaScript 执行完成 - 包括任何 GIF 动画的下一帧。

唯一的解决方案是将您的长处理代码分解为更小的部分，并使用计时器延迟每个部分。

例如:

function nameOfFuntion() {
    document.getElementById("gif").style.display = "inline";
    //alert("test");
    lotsOfProcessing();
}

function lotsOfProcessing() {
    var i = 0;
    window.setTimeout(function () {
        partOfIntenseProcessing();
        if (i < 1000000)
            i++, window.setTimeout(arguments.callee, 10);
    }, 10);
}

这将延迟完成处理所需的时间，但在计时器执行之间 GIF 可以继续动画。

你也可以看看Web Workers ，它允许您在后台线程中运行 JavaScript 操作。但是，它们尚未得到广泛实现(阅读:在 Internet Explorer 中不可用)。