版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012963866/article/details/77703828
今天在做项目的时候，发现当alert存在时，会导致代码执行顺序不一致。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input id="idi"/>
<input type="button" id="idc" onclick="test()"/>
</body>
<script>
function test() {
document.getElementById("idi").value="这是遮罩层";
alert("这是遮罩层");
}
</script>
</html>解决方法一：不用alert，使用自己封装的弹出插件。
解决方法二：使用setTimeout；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input id="idi"/>
<input type="button" id="idc" onclick="test()"/>
</body>
<script>
function test() {
document.getElementById("idi").value="这是遮罩层";
setTimeout(function(){
alert("这是遮罩层");
},100);
}
</script>
</html>这样既可。
alert会阻塞线程，因为javascript是单线程的。
实际上当执行test方法时，顺序是：执行赋值语句->alert->浏览器绘制至页面上。
因为alert执行的时候，浏览器还没有来得及给input赋值，所以就会导致我们先看到alert，再看到赋值成功，所以延时是可以解决这个问题，但是不稳定，最好的方法还是使用弹出插件。