顯示一個HTML元素，而在一個循環

我試圖表明一個HTML元素的循環運行的同時，不幸的是，我的做法似乎並沒有工作：顯示一個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()在循環結束之前不會顯示。

我已經試圖把循環放在另一個函數中，但是這並沒有改變任何東西。

來源

2017-08-24 korguell

如果您有什麼用'setTimer'而不是直接調用它調用你的循環？ –

Javascript運行*非常*快。在繼續使用邏輯之前，JavaScript不會等待瀏覽器有機會重繪。在瀏覽器有機會執行重繪/重排之前，您的邏輯很可能已經完成，因此您沒有看到效果。 – Taplar

正如@Taplar所說，你是否證實了'doSomething（）'花了足夠長的時間，以至於'＃myElement'可以被看到足夠長的時間才能注意到？你可以看看它是否在工作，如果你要在你的循環中加入一個警告，強制js停止，直到你每次點擊ok。如果你在看到你的元素時發出警報，那麼js很可能只是跑得快。 –

只有在調用堆棧爲空時，類列表的更改纔會生效。你可以強制這個超時爲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>

來源

2017-08-24 14:40:32 Thijs

希望我能想到，雖然爲什麼你使用'setTimeout'在最後隱藏元素？ –

@ScottHunter當時看起來是個好主意，但你說得對，可能並不需要。 – Thijs

用一個工作示例更新了答案。而@ScottHunter，你是對的。不需要隱藏元素的超時。 – Thijs

顯示一個HTML元素，而在一個循環

回答

相關問題