在IE和Chrome中禁用具有不同警报消息的元素 [英] Disabling elements with alert message different in IE and Chrome

问题描述

我有一个按钮（让我们称之为Toggler）更改另一个按钮的已禁用属性，然后显示 alert（）消息。

I have a button (lets call it Toggler) that changes the disabled property of another button then displays an alert() message.

在Internet Explorer 11中，当单击Toggler时，当显示警告消息时，该按钮会在视觉上被禁用。

In Internet Explorer 11, when one clicks on Toggler, the button visually becomes disabled when the alert message displays.

但是，在Chrome（54.0.2840.99）中，当单击Toggler时，按钮在显示警报消息时不会在视觉上被禁用。只有关闭警报框后，该按钮才会被禁用。

However, in Chrome (54.0.2840.99), when one clicks on Toggler, the button does NOT visually become disabled when the alert message displays. Only after closing the alert box does the button become disabled.

我如何制作两个浏览器（以及Safari，Edge等 - 公司电脑，所以我没有它们）当弹出警告信息时，按钮是否显示为禁用？

How would I make both browsers (and Safari, Edge, etc - company computer so I don't have them) have the button appear disabled when the alert message pops up?

用于演示的Barebones代码

Barebones code to demonstrate

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>

推荐答案

警报发生的是由浏览器创建的速度比操作系统更新按钮的显示速度快。

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

An alert() isn't actually created by JavaScript. JavaScript can initiate a request for one, but an alert is part of the window API (it's actually window.alert()) and the window API is managed by the browser, not the JavaScript runtime.

所以，如果你在一行上有一些JavaScript会导致UI更新，下一行会发出 alert ，即使两条线一次一个地处理，它们也会一个接一个地发生，它们之间的延迟很小。此时，它是浏览器和JavaScript运行时之间的竞争，以查看哪个可以首先更新UI。由于浏览器（使用本机代码编写）比JS运行时更快，因此浏览器赢得比赛（即使其指令排在第二位）并生成 alert（）在按钮的渲染完成之前。

So, if you've got some JavaScript on one line that does something that should cause the UI to update and the next line initiates a request for an alert, even though the two lines were processed one at a time, they happen one right after the other with very little delay between them. At that point, it's a race between the browser and the JavaScript runtime to see which can update the UI first. Since the browser (which is written in native code) is faster than the JS runtime, the browser wins the race (even though its instruction came second) and produces the alert() before the button's rendering is completed.

现在，因为警报是一个阻塞组件，就是它阻止UI更新，现在无法更新按钮的显示，直到警告完成。

Now, because an alert is a "blocking" component, that is it blocks the UI from updating, the button's display now cannot be updated until the alert completes.

要解决此问题，您可以延迟 alert（）的请求，以确保按钮的渲染首先使用 setTimeout（） 。 setTimeout（）（另一个窗口 API），要求你传递一个在指定的毫秒延迟后运行的函数，当JavaScript运行时空闲时，直到（至少）当前函数完成才会发生。

To solve this, you can delay the request for the alert() just long enough to ensure the button's rendering changes first with setTimeout(). setTimeout() (another window API), requires you pass it a function that will run after a specified millisecond delay, when the JavaScript runtime is idle, which won't happen until (at least) the current function completes.

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>

这篇关于在IE和Chrome中禁用具有不同警报消息的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！