Question

我可以通过将更改显示在setTimeout（）中来解决此问题，但是有人可以解释为什么会发生这种情况吗？使用这两行中的任一行，直到alert（）消失，对显示的更改才完成。谢谢你的帮助。

        //$('#' + divId).hide();alert('test');
        document.getElementById(divId).style.display = 'none'; alert('test');

这里的div是下面的弹出窗口。稍后对其进行修改并使其可见。

<div id="reportOptsDiv" style="display: none;">
  <div class="centerDiv">
    <div class="row">
      <div class="col-xs-12">
        <div id="reportOptsDataDiv">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12" style="margin-top: 15px; text-align: center">
        <div class="btn-group btn-group-sm">
           <button type="button" class="btn btn-primary" 
             onClick="addressBook.saveOptions('rtype', 
       'reportOptsDiv');">Save</button>
          <button type="button" class="btn btn-default" onClick="addressBook.cancelOptions('reportOptsDiv');">Cancel</button>
    </div>
   </div>
  </div>
  </div>
 </div> <!-- end of reportOptsDiv -->

Answer 1

alert()会阻止UI线程并因此阻止显示。因此，直到功能完成，您才能看到更改。

显示更改之后的alert（）暂停更改，直到alert（）完成

1 个答案: