Javascript 等待暂停的DOM样式更改

调用此函数时，gif元素上的样式更改直到LOTSOF处理完成后才会显示。但是，当我取消对alerttest的注释时，在弹出警报之前会显示样式更改

我试图做的是在LotusSofProcessing运行时显示一个动画gif。这似乎是一个非常直截了当的解决方案，但显然不起作用。有什么建议/解决方案吗

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

---

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

---

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

---

真奇怪。看起来LotusSofProcessing在dom刷新之前就获得了javascript的单线程，但这是我第一次听说这样的事情

您可以尝试以下方法，但这不是理想的解决方案：

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

---

真奇怪。看起来LotusSofProcessing在dom刷新之前就获得了javascript的单线程，但这是我第一次听说这样的事情

您可以尝试以下方法，但这不是理想的解决方案：

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

---

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可以继续设置动画

---

您还可以查看，它允许您在后台线程中运行JavaScript操作。但是，它们还没有得到广泛的实现：在Internet Explorer中不可用。

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可以继续设置动画

---

您还可以查看，它允许您在后台线程中运行JavaScript操作。但是，它们还没有被广泛地实现：在Internet Explorer中不可用。

这是一个模糊的猜测，但可能值得尝试将document.getElementByIdgif.style.display=inline；变成一个函数

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

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

---

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

这是一个模糊的猜测，但可能值得尝试将document.getElementByIdgif.style.display=inline；变成一个函数

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

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

---

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

事实上，这是我发布问题后的第一次尝试。然而，它给了我一个同样奇怪的问题。gif将显示，但仅为延迟的长度设置动画。也许我应该在这一点上发布一个单独的问题。当你的JavaScript运行时，你不会得到任何重绘。这包括动画GIF。如果你想要背景计算，你需要看看网络工作者。不幸的是，我只限于IE，因此没有网络工作者，因为我使用的是.hta。事实上，这是我发布问题后的第一次尝试。然而，它给了我一个同样奇怪的问题。gif将显示，但仅为延迟的长度设置动画。也许我应该在这一点上发布一个单独的问题。当你的JavaScript运行时，你不会得到任何重绘。这包括动画GIF。如果你想要背景计算，你需要看看网络工作者。不幸的是，我只限于IE，因此没有网络工作者，因为我使用的是.hta。你是对的。通过一个简单的超时，我可以画出gif，但不能继续制作动画。我现在所做的事情真的很难分开，因为我在一个.hta中工作，并使用ActiveX进行大文件移动——有一个操作占用了95%的时间。“真的很难看，我知道。”荧光灯：那么网络工作者就帮不了你了。如果你使用HTA，你可以考虑一个无模式对话框来卸载工作。HTA可以通过设置未经修饰的选项：聪明！来打开没有chrome窗口框架的无模式对话框！这难道不能用于创建多个javascript线程，并使用父对象与原始线程对话吗？@fluorescent:从技术上讲，是的。不幸的是，它的内存效率不是很高。你是对的。通过一个简单的超时，我可以画出gif，但不能继续制作动画。我现在所做的事情很难分开，因为我在一个.hta中工作，并且用Active进行大文件移动

---

X-有一个操作占用了95%的时间。“真的很难看，我知道。”荧光灯：那么网络工作者就帮不了你了。如果你使用HTA，你可以考虑一个无模式对话框来卸载工作。HTA可以通过设置未经修饰的选项：聪明！来打开没有chrome窗口框架的无模式对话框！这难道不能用于创建多个javascript线程，并使用父对象与原始线程对话吗？@fluorescent:从技术上讲，是的。不幸的是，它的内存效率不是很高。