如下代码,正常alert之后,点击确定,第二个button的value会变成123。但是在这样的场景下:
点击button1, alert框出现,此时切换浏览器的标签页,button2的value变成了123,而alert框还在。
这是我对alert的理解有问题,还是说这是浏览器的BUG?
当前已经在chrome和edge上分别尝试过,效果是一样的,但是如果打开developer tool的情况下,这种现象则不会发生。什么情况?求大神指点。
正常情况:
异常情况:
补充一下,IE和firefox浏览器没有这个问题。IE浏览器阻止了在不同标签页之间切换,而firefox即使切换也不会有问题。
<html>
<head>
<script type = "text/javascript">
function fun() {
alert (" Hello World \n Welcome to the javaTpoint.com \n This is an alert dialog box ");
document.getElementById("test").setAttribute("value", 123);
}
function fun2() {
document.getElementById("test").setAttribute("value", "test");
}
</script>
</head>
<body>
<p> Click the following button to see the effect </p>
<form>
<input type = "button" value = "Click me" onclick = "fun();" />
<input type = "button" id="test" value = "Test" onclick = "fun2()" />
</form>
</body>
</html>
说起来好麻烦,
结论,alert不是JS原生API
你可能会疑惑,明明是在js中调用window.alert 为什么说alert 不是JS原生API
这是因为,js是脚本语言,运行在浏览器中时,浏览器就是目标平台,alert阻塞js代码的执行原理,实际上是由目标平台处理的,这个案例中就是chrome
百度上说:JS引擎会给出一些用来把目标平台业务API包装为可使用JS语法调用的机制。
可以百度如何使用C++ qt 实现alert 方法,在js 全局调用alert 对话框
然后,上学的时候老师讲操作系统的时候,你能在windows中看到应用的显示,依赖的是GUI的渲染 ,也就是这里的alert弹出框是被 chrome 的GUI渲染的
GUI会有一个线程来收发消息,就像js引擎中的事件循环,eventloop 。毕竟用户的操作基本上都是异步的,这个不难理解,在windows中,经常遇到某个程序显示 “未响应” ,也就是进程被卡死了,或者说GUI被卡死。
理解了上面这一点,我们想让弹出的窗口禁止后续的代码,就必须在消息线程中实现一个有条件退出的“死循环”,比如用户的确定,关闭等操作。当“死循环”退出后,或者消息线程挂起后,再把主消息循环恢复,就可以执行其他的代码。
这里切换标签页,或者把chrome 最小化到任务栏,这个应用的GUI线程被挂起,自然也就不能阻止
主线程执行其他代码,所以alert 后的代码会执行,如果你打开developer tool ,也就意味着GUI没有挂起,自然会继续阻止主线程执行其他代码。
我自己的理解,可能不准确,但是大概是这个意思