javascript - 在 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

发生的事情是浏览器( native 代码)创建警报的速度快于 JavaScript 运行时更新按钮显示的速度。

安alert()实际上并不是由 JavaScript 创建的。 JavaScript 可以发起一个请求，但是一个 alert是 window 的一部分API(实际上是 window.alert() )和 window API 由浏览器管理，而不是 JavaScript 运行时。

因此，如果您在一行中使用了一些 JavaScript 来执行一些应该导致 UI 更新的操作，而下一行启动了对 alert 的请求。 ，即使两条线一次处理一条，它们也会一条接一条地发生，它们之间的延迟很小。届时，浏览器和 JavaScript 运行时之间将展开一场竞赛，看谁能先更新 UI。由于浏览器(用 native 代码编写)比 JS 运行时更快，因此浏览器赢得了比赛(即使它的指令排在第二位)并生成 alert()。在按钮渲染完成之前。

现在，因为 alert是一个“阻塞”组件，它会阻止 UI 更新，按钮的显示现在无法更新，直到 alert完成。

要解决此问题，您可以延迟对 alert() 的请求足够长的时间以确保按钮的呈现首先发生变化 setTimeout() 。 setTimeout() (另一个 window API)，要求您向它传递一个函数，该函数将在 JavaScript 运行时空闲时在指定的毫秒延迟后运行，直到(至少)当前函数完成后才会发生。

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

function toggle() {
    if(enabled) {
    	disableBtn(btn);
  
        // Add a short delay to allow the UI to catch up
        setTimeout(function() {
            alert("Now Disabled");
        }, 20);  
    } else {
        enableBtn(btn);
    
        setTimeout(function() {
            alert("Now Enabled");
        }, 20);
    }
    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>