DOM风格变化等待暂停

当调用此函数时，直到“lotsOfProcessing（）”完成时，“gif”元素的风格变化才会显示。但是，当我取消注释警报（“测试”）时，会在弹出警报之前显示样式更改。DOM风格变化等待暂停

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

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

来源

2010-11-08 devinpleuler

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中不可用）。

来源

2010-11-08 14:48:00

你说得对。通过简单的超时，我可以绘制gif，但不能继续动画。我现在正在做的事情是很难分手的，因为我正在使用.hta并使用ActiveX来执行大文件移动 - 有一项操作占用了95％的时间。真的很丑，我知道。 – devinpleuler 2010-11-08 16:47:20

@fluorescentLAMP：然后WebWorkers不能帮你。如果您使用的是HTA，则可以考虑使用无模式对话框来卸载工作。通过设置* unadorned *选项，HTA可以打开无镀铬（窗口框架）的无模式对话框：http://msdn.microsoft.com/en-us/library/ms536761(VS.85).aspx – 2010-11-08 19:30:50

聪明！难道这不能用于创建多个JavaScript线程，并使用父对象，谈谈原始线程？ – devinpleuler 2010-11-08 20:58:36

在延迟功能与window.setTimeout()执行你沉重的处理：

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

来源

2010-11-08 14:24:53

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

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

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

来源

2010-11-08 14:26:10

其实，这是我发布问题后的第一次尝试。然而，它给我提供了一个同样奇怪的问题。 gif出现了，但只对延迟的长度产生了动画效果。也许我应该在这个问题上发布一个单独的问题。 – devinpleuler 2010-11-08 14:33:02

当您的JavaScript正在运行时，您不会得到任何重绘。这包括动画GIF。如果你想要背景计算，你需要看WebWorkers。 – bobince 2010-11-08 15:24:20

不幸的是，自从我使用.hta以来，我仅限于IE（因此没有WebWorkers）。 – devinpleuler 2010-11-08 16:53:27

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

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

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

我的想法是，也许lotsOfProcessing()越来越悬挂到nameOfFunction()顶部，因为它是一个功能，因此得到优先处理。

来源

2010-11-08 15:49:58 MrMisterMan

DOM风格变化等待暂停

回答

相关问题