写了个表单，其中有个这样的设定：
输入密码，如果密码长度低于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>
然而，在实际执行的时候，却发现一个现象：
先弹出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()对话框：
点完确定按钮之后，才同时出现pwd这个对象的内容和黄色文本框。
即便是不考虑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对话框。
也就是说，浏览器的确是按顺序执行的，并不是先运行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。
