更改可见性不会立即隐藏 iFrame答案

【问题标题】：Changing visibility does not immediately hide iFrame更改可见性不会立即隐藏 iFrame
【发布时间】：2010-11-02 15:01:02
【问题描述】：

我有一个页面，它在某个操作上使 iframe 可见并用一些 HTML 填充 iframe（例如，多选框和确定按钮）。

iframe 上的 OK 按钮的 onClick 方法定义如下：

onClick="parent.hideIFrame();parent.processMultiSelectBox();"

当用户在 iframe 上单击“确定”时（大概是在玩了多选框之后），我希望 iFrame 立即消失，然后可以处理多选框中的选定值。但这不是正在发生的事情。 iFrame 在其他函数运行期间保持可见，仅在第二个函数完成后消失。

hideIFrame 函数非常简单：

function hideIFrame() {
  frmObj = document.all.iFrameID;
  if(frmObj) {
    frmObj.style.visibility = "hidden";
  }
}

为了清楚起见，我已经解释了上述函数（删除了一些指标变量分配等）

第二个函数实际上循环了多选对象中的所有选项并对其进行处理。这大约需要半秒钟，只有在完成之后，我的 iFrame 才会消失。单击确定时看到它徘徊半秒钟有点麻烦。

我的问题是，是否有某种方法可以让这该死的东西更快消失。用“经典 C”术语来说，是否有“冲洗”让可见性的变化立即发生？

我确实注意到，如果我将“警报”作为第二个函数的第一行，iframe 会立即消失，但现在警报框上的 OK 会在第二个函数完成所需的时间内徘徊。

谢谢。

编辑：根据 DDaviesBrackett 的回答，这就是我最终要做的：

iframe 中的 onclick 改为：

onClick="parent.hideAndProcessMultiSelectBox(parm1, parm2);"

hideAndProcessMultiSelectBox 函数定义为：

function hideAndProcessMultiSelectBox( parm1, parm2 ) {
   hideIFrame();
   setTimeout( function() { processMultiSelectBox( parm1, parm2 ); }, 0 );
}

瞧..没有延迟..

【问题讨论】：

【解决方案1】：

您已经找到了问题的根源；在当前 JS 线程完成之前不会发生文档重排（以免在 JS 执行期间重绘很多次）。在进行昂贵的处理之前，您需要将控制权交还给浏览器。

实现这一点的最简单方法是在延迟为 0 的 setTimeout 中调用 processMultiSelectBox，尽管它丝毫没有明显的代码：

onClick="parent.hideIFrame();parent.setTimeout(parent.processMultiSelectBox,0);"

如果您需要将参数传递给要设置超时的对象，您有两个选择：在 eval 为 Javascript（坏、坏、非常坏、可怕）的字符串上设置超时或定义匿名函数调用你感兴趣的那个：

onClick="parent.hideIFrame();parent.setTimeout(function(){parent.processMultiSelectBox(foo, bar, 'baz');},0);"

RSolberg 的回复也可能有所帮助，尽管 visibility:hidden 和 display:none 之间存在差异。

【讨论】：