如何在IE浏览器中通过JavaScript立即设置样式

Question

最近我在使用IE时遇到了一个问题。我有一个函数

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

其中ShowProgress和HideProgress只是使用jQuery的css()方法来操作'display' CSS样式。

在Firefox中一切正常，同时我将display属性更改为block时，进度条出现了。但在IE中不行。在IE中应用样式后，一旦我离开函数，就意味着它从未显示过，因为在函数结束时我只是隐藏它。（如果我删除HideProgress行，则进度条会在执行完函数后立即出现（更准确地说，在调用函数结束时立即出现 - 因此在IE中没有其他操作）。）

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

我已经准备好一个解决方案，但需要花费一些时间来实现它。我的DoSomeWork()方法正在进行一些AJAX调用，而这些调用现在是同步的。我认为将它们变成异步的会解决问题，但我必须对代码进行重新设计，因此仅找到一个立即应用样式的解决方案会更简单。

谢谢rezna

- rezna

Answer 1

同步请求会阻塞整个用户界面，这太糟糕了。你的想法是正确的，但如果你想继续走向地狱的内圈，请尝试以下方法：

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

请注意，我还没有测试过这个。如果您仍然看不到任何东西，请尝试更改超时值（目前为0）。

- janmoesen

---

是的，我也这样认为。使用setTimeout玩起来相当棘手，而且我认为它会带来更严重的问题。所以我要重新设计代码 :) - rezna

Answer 2

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

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

尽管延迟时间理论上为0毫秒，但它会将HideProcess方法推到队列的末尾，这可能会给浏览器留出所需的缓冲时间。

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

- Andrew

---

问题不在于HideProgress，而是在执行DoSomeWork()期间进度条不可见... - rezna

如果您删除 HideProgress() 和/或 DoSomeWork()，进度条是否会显示出来？您能发布您的 ShowProgress 函数吗？ - Andrew

如果我删除HideProgress行，进度条将会在函数执行完毕后立即出现（更准确地说，当调用函数结束时立即出现 - 因此在IE中没有其他操作）。我的ShowProgress()函数很简单function ShowProgress() { $('#my-id').css('display', 'block'); } - rezna

哇。我从未见过IE会那样表现。最后一个想法：与其通过jQuery应用样式，不如直接应用它。我并不是说你应该以这种方式部署它，而是为了看看问题出在哪里。function ShowProgress() {document.getElementById('my-id').style.display='block'}。 - Andrew

不对，仍然是一样的。在离开代码块后，样式才会被视觉应用。 - rezna

那一定是同步请求。样式更改可能会被延迟，但随后被请求阻塞。这真的很令人失望。Janmoesen将DoSomeWork放入超时的想法可能会奏效。但我真的不知道。抱歉。 - Andrew