如何立即在 IE 中通过 javascript 设置样式

Question

最近我遇到了一个 IE 问题。我有一个功能

function() {
    ShowProgress();
    DoSomeWork();
    HideProgress();
}

其中 ShowProgress 和 HideProgress 只是使用 jQuery 的 css() 方法操作“显示”CSS 样式。

在 FF 中一切正常，同时我将显示属性更改为阻止，出现进度条。但不是在 IE 中。在 IE 中，一旦我离开该功能，就会应用样式。这意味着它永远不会显示，因为在函数结束时我只是将它隐藏起来。 （如果我删除 HideProgress 行，则在完成函数执行后会立即出现进度条（更准确地说，是在调用函数结束时立即出现 - 因此 IE 中没有其他任何事情发生）。

有人遇到过这种行为吗？有没有办法让 IE 立即应用样式？

我已准备好解决方案，但实施它需要一些时间。我的 DoSomeWork() 方法正在执行一些 AJAX 调用，这些调用现在是同步的。我认为使它们异步会解决问题，但我必须重新设计代码，所以找到一个立即应用样式的解决方案会简单得多。

谢谢你

Answer 1

同步请求会阻塞整个 UI，这太可怕了。你的假设是对的，但如果你想继续沿着这条路走到 $hell 的内圈，试试这个：

function () {
    ShowProgress();
    window.setTimeout(function () {
        DoSomeWork();
        HideProgress();
    }, 0);
}

请注意，我没有对此进行测试。如果您仍然看不到任何内容，请尝试使用超时值（当前为 0）。

Answer 2

尝试将 HideProgress 方法放入 setTimeout。例如：

function() {
    ShowProgress();
    DoSomeWork();
    setTimeout(HideProgress,0);
}

即使延迟应该是 0 毫秒，这也会产生将 HideProcess 方法扔到队列末尾的净效果，并可能为浏览器提供所需的喘息空间。

[Edit] 我应该提到，如果你经常快速地调用这个方法，这个方法确实有一个缺点：竞争条件。您可能会在另一个 DoSomeWork() 正在执行时执行先前的超时。如果 DoSomeWork 需要很长时间才能完成，这将发生。如果这是一个风险，您可能希望为您的进度条实现一个计数器，并且仅当启动它的计数器与计数器的当前值相同时才执行 HideProgress。