alert()方法是如何阻塞JS的

写了个表单,其中有个这样的设定:

输入密码,如果密码长度低于6位,则输入框颜色变黄,且弹出提醒“密码长度不低于6位”。

我把这部分的代码拎出来,如下:

<html>
<head>
    <meta charset="utf-8">
    <title>alert问题</title>
    <style type="text/css">
        .bg {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <input type="text" id="pwd">
    <input type="submit" id="btn" value="登录">
    <script type="text/javascript">
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            var pwd = document.getElementById('pwd');
            if (pwd.value.length < 6) {
                pwd.className = "bg";
                alert("密码长度不低于6位");
            }
        }
    </script>
</body>
</html>

然而,在实际执行的时候,却发现一个现象:

微信截图_20180425200122.png

先弹出alert对话框,此时文本框并未变成黄色,点一下“确定”,文本框才变成黄色。

我们知道,JS是单线程的,alert()会阻塞JS继续执行。

但是,问题在于,“pwd.className = "bg";”在“alert("密码长度不低于6位");”之前执行,为什么还会被alert()阻塞呢?

有没有可能是这样:虽然pwd.className已经被设置成了“bg”,但是CSS此时并没有被加载,所以文本框仍然没有变色。JS继续执行,然后被alert()阻塞。

为了验证这个想法,我只需要在alert()前用console.log打印一下pwd,如果console里能出现pwd这个对象,即便是文本框没变色,仍然可以说明是按顺序执行的(这里我犯了一个错,但是这个错引出了有趣的东西),于是循环体就变成:

pwd.className = "bg";
console.log(pwd);
alert("密码长度不低于6位");

执行一下试试,结果出乎意料,仍然是先弹出alert()对话框:

2.png

点完确定按钮之后,才同时出现pwd这个对象的内容和黄色文本框。

3.png

即便是不考虑CSS加载的问题,console.log(pwd);仍然没有在alert()之前出结果。

很费解。。

猜想,由于alert()会阻塞js,给alert加个setTimeout试试:如果优先执行alert(),那么无论多少毫秒之后,都得alert()执行完才能执行console.log(pwd)。

pwd.className = "bg";
console.log(pwd);
setTimeout("alert('密码长度不低于6位');", 100);

这段setTimeout代码的意思是,100毫秒后执行

"alert('密码长度不低于6位');"

有趣的是,这次是console.log讲pwd打印出来,同时文本框变黄了,再弹出alert对话框。

4.png

也就是说,浏览器的确是按顺序执行的,并不是先运行alert()然后再去执行前面的语句。

那为什么在之前的操作中,出现了先alert()的情况呢?

答案可能就在setTimeout延后的时间里。将这句代码的时间改成1ms:

setTimeout("alert('密码长度不低于6位');", 1);

果然又出现了先弹出alert()对话框并阻塞的情况。我们可以推断,其实此时浏览器已经执行过了修改className和打印pwd的操作,仅仅过了1毫秒还没有生效,js开始执行alert(),然后就阻塞了。这也可以解释设置成100毫秒就没问题。

那浏览器多久可以设置好这两项操作呢?

我试着在二分法在1-100ms之间找临界点,发现我的浏览器在7毫秒的时候会先弹出alert再打印pwd,而8毫米就可以先打印pwd再弹出alert。

换句话说,浏览器需要8毫秒的时间,获取到pwd对象,并将该对象转化成字符串,在console里打印出来——其实也挺久的。

这里其实是我犯下的一个小错误,循环体里第一句“pwd.className = "bg";”,其实后面更应该用console.log()打印pwd.className而不是pwd本身。当然也正是因为这个疏忽,让我发现了一些规律。

试一下:

pwd.className = "bg";
console.log(pwd.className);
setTimeout("alert('密码长度不低于6位');", 1);

果然,浏览器花了1毫秒就获取到了pwd的className。

推荐阅读更多精彩内容