的JavaScript：以不同的順序

功能火災，我不明白爲什麼功能alert()閃光之前在此代碼設置樣式indicator：的JavaScript：以不同的順序

的JavaScript：

var MyClass = function() 
{ 
    th  = this; 
    th.func = function(){alert('yes');}; 
    th.Click = function(){ 
    document.getElementById('indicator').style.color = "#0f0"; 
    document.getElementById('indicator').innerHTML = "YES"; 
    th.func();  // here it fires before above style changing 
    }; 
    th.Start = function() 
    { 
    var a = document.getElementById('button1'); 
    a.addEventListener('click', th.Click, false); 
    }; 
    th.Init = function() 
    { 
    th.Start(); 
    }; 
} 
var a = new MyClass().Init();

HTML：

<button id='button1'>Click Me</button> 
<div id='indicator' style='color:#f00'>NO</div>

我想讓它在之後觸發。

來源

2017-04-13 Max Maximilian

它會觸發後，但你遇到的是「線程阻塞」。 alert（）將停止當前頁面上來自瀏覽器的所有操作。所以它也會阻止重新繪製內容。你可以通過使用非阻塞調用來檢查，例如'window.setTimeout（th.func，0）;' – devnull69

@ devnull69，所以如果它將是不同的函數，例如'GET（）'請求而不是'alert ）'，它會按正常順序運行？ –

是的，你是正確的，但只適用於異步方法。對於每一個同步的程序，如果你不使用'setTimeout'，例如 – devnull69

那是因爲單線程性質的Javascript。警報/模式窗口實際上阻止了其他運行，直到它被解散。

這包括改變顏色。 Javascript實際上說，嘿，瀏覽器開始改變顏色並繼續前進，但是當它發出警報時，顏色的變化或發生的任何過程都將被暫停，並且直到模式窗口aka警報被解除後纔會再次開始。解決辦法可能是做這樣的事情：codepen

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
    </head> 
    <body> 
     <button id='button1'>Click Me</button> 
     <div id='indicator' style='color:#f00'>NO</div> 
     <script type="text/javascript"> 
     var MyClass = function() { 
     th    = this; 
     th.func = function() { window.alert('yes'); }; 
     th.Click = function() { 
      document.getElementById('indicator').style.color = "#0f0"; 
      document.getElementById('indicator').innerHTML = "YES"; 
      // The setTimeout fix 
      // ==== 
      setTimeout(th.func, 100); 
     }; 
     th.Start = function() 
     { 
      var a = document.getElementById('button1'); 
      a.addEventListener('click', th.Click, false); 
     }; 
     th.Init = function() 
     { 
      th.Start(); 
     }; 
     } 
     var a = new MyClass().Init(); 
     </script> 
    </body> 
</html>

來源

2017-04-13 12:09:35

哎呀。最後一個問題：例如，我有很慢的機器（或者非常的負載），我們不僅在這裏改變了風格，而且在超時之前還有一個很大的功能，我把超時設置爲'1'，在這些情況下也會啓動嗎？ –

無論如何，setTimeout代碼將始終在下一個處理器週期（tick）中執行。舉一個例子：'setTimeout（（）=> {alert（「Hi」）;}，0）; （「你好！」）;'這裏實際上「嗨」的警報應該先工作，因爲我們必須等待0秒，但是「你好！」首先工作 –

是的，我做了一個循環，它工作正常，謝謝你的幫助！ ;）） –

的JavaScript：以不同的順序

回答

相關問題