javascript - 更改可见性不会立即隐藏 iFrame

Question

我有一个页面，在某个操作上使 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 );
}

瞧..没有延迟..

Answer 1

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

实现这一点的最简单方法是在延迟为 0 的 setTimeout 中调用 processMultiSelectBox:

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

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

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

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