我试图在循环运行时显示 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()
在循环完成之前没有出现。
我已经尝试将循环放在另一个函数中,但这并没有改变任何东西。
最佳答案
在调用堆栈为空之前,类列表的更改不会生效。您可以将超时设置为 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>
关于javascript - 在循环中显示 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45864402/