javascript - 在循环中显示 HTML 元素

Question

我试图在循环运行时显示 HTML 元素，不幸的是，我的方法似乎不起作用:

function mainFunction() {
    $( '#myElement').removeClass( 'hidden');    
    $( 'div.otherElements').each( function() {
        doSomething();
    });
    $( '#myElement').addClass( 'hidden');
}

removeClass() 和 addClass() 调用本身工作正常，循环也是如此。我的怀疑是，循环在 .removeClass() 调用完成之前开始并且调用一直等到循环结束，所以它从来没有真正显示在屏幕上，因为 .removeclass( ) 和 .addClass() 几乎同时发生。如果我使用 console.log() 而不是 jquery 调用，它会显示相同的行为。当我调用 mainFunction() 时，第一个 .console.log() 在循环完成之前没有出现。

我已经尝试将循环放在另一个函数中，但这并没有改变任何东西。

Answer 1

在调用堆栈为空之前，类列表的更改不会生效。您可以将超时设置为 0 来强制执行此操作。此示例非常笨拙，但可以完成工作。

   function pause(milliseconds) {
      var dt = new Date();
      while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
   }

    function doSomething() {
      pause(500); 
    }
    
    function mainFunction() {
        $( '#myElement').removeClass( 'hidden');    
        setTimeout(() => {
            $( 'div.otherElements').each( function() {
                doSomething();
            });
            $( '#myElement').addClass( 'hidden');
        }, 0);
    }
    
    mainFunction();

.hidden {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="otherElements"></div>
<div class="otherElements"></div>
<div class="otherElements"></div>
<div class="otherElements"></div>
<div class="otherElements"></div>
<div class="otherElements"></div>

<div id="myElement" class="hidden">Doing important work</div>