Question

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

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

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

Answer 1

JavaScript代码在与浏览器呈现相同的线程上执行。需要绘制的 Everything 等待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中不可用）。

Answer 2

使用window.setTimeout()：

在延迟功能中执行繁重处理

function nameOfFunction()
{
    document.getElementById("gif").style.display = "inline";
    window.setTimeout(lotsOfProcessing, 10);
}

Answer 3

确实很奇怪。好像lotsOfProcessing在dom有时间刷新之前获取javascript的单线程，但这是我第一次听到类似的东西。

你可以试试这个（不是一个理想的解决方案）：

function nameOfFuntion()
    {
        document.getElementById("gif").style.display = "inline";
        setTimeout(lotsOfProcessing, 100);
    }

Answer 4

这是一个模糊的教育猜测，但可能值得尝试将document.getElementById("gif").style.display = "inline";放入函数中，例如。

function nameOfFuntion()
{
    showGif();
    //alert("test");
    lotsOfProcessing();
}

function showGif() {
    document.getElementById("gif").style.display = "inline";
}

我的想法是，lotsOfProcessing()可能被提升到nameOfFunction()的顶部，因为它是一个函数，因此首先得到处理。

DOM样式改变等待暂停

4 个答案: