在IE和Chrome中禁用警報消息的元素

Question

我有一個按鈕（讓我們稱它爲Toggler），它改變另一個按鈕的disabled屬性，然後顯示一條alert()消息。

在Internet Explorer 11中，當點擊Toggler時，當顯示警告消息時，該按鈕在視覺上被禁用。

但是，在Chrome（54.0.2840.99）中，當您單擊Toggler時，當顯示警告消息時，按鈕不會在視覺上被禁用。只有在關閉警報框後，該按鈕纔會被禁用。

如何讓兩個瀏覽器（和Safari，Edge等 - 公司計算機，所以我沒有他們）彈出警告消息時，按鈕顯示禁用？

準系統代碼來演示

var btn; 
 
var enabled = true; 
 

 
function toggle() { 
 
    if (enabled) { 
 
    disableBtn(btn); 
 
    alert("Now Disabled"); 
 
    } else { 
 
    enableBtn(btn); 
 
    alert("Now Enabled"); 
 
    } 
 
    enabled = !enabled 
 
} 
 

 
function disableBtn(element) { 
 
    element.disabled = true; 
 
} 
 

 
function enableBtn(element) { 
 
    element.disabled = false; 
 
} 
 

 
window.onload = function() { 
 
    btn = document.getElementById("btn"); 
 
}

<button onclick="toggle();">Button to toggle things</button> 
 
<br /> 
 
<br /> 
 
<button id="btn">Button that shows if enabled or not</button>

Answer 1

警報 「阻塞」，即，它們阻止更新UI。 UI更新的順序取決於代碼的處理速度。在你的情況下，JavaScript引擎正在處理alert()代碼，然後它可以更新頁面（實際上並未由JavaScript運行時處理 - 這是由操作系統處理的）。

所以基本上，你已經有JavaScript運行時處理你的JavaScript（一次一個語句），它會得到一個禁用按鈕的請求。所以，JavaScript運行時會向操作系統發送消息來做到這一點，然後JavaScript運行時就會轉到下一條指令，即顯示警報。正在發生的事情是瀏覽器正在創建的警報比操作系統更新按鈕的顯示更快。

爲了解決這個問題，你可以添加一個延遲到alert()與setTimeout()

var btn = document.getElementById("btn"); 
 
var enabled = true; 
 

 
function toggle() { 
 
    if(enabled) { 
 
    \t disableBtn(btn); 
 
    
 
     // Add a short delay to allow the UI to catch up 
 
     setTimeout(function() { 
 
      alert("Now Disabled"); 
 
     }, 250); 
 
    
 
    } else { 
 
     enableBtn(btn); 
 
    
 
     setTimeout(function() { 
 
      alert("Now Enabled"); 
 
     }, 100); 
 
    } 
 
    enabled = !enabled; 
 
} 
 

 
function disableBtn(element) { element.disabled = true; } 
 
function enableBtn(element) { element.disabled = false; }

<button onclick="toggle();">Button to toggle things</button><br /><br /> 
 
<button id="btn">Button that shows if enabled or not</button>