javascrip执行顺序问题_alert阻塞 input赋值-优快云博客

本文链接：https://blog.youkuaiyun.com/u012963866/article/details/77703828

本文探讨了在JavaScript中使用alert导致的代码执行顺序问题，分析了alert如何阻塞线程，并提供了两种解决方案：一是使用自定义弹窗插件替代alert；二是利用setTimeout实现异步操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在做项目的时候，发现当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，点击确定后才给input赋值。

解决方法一：不用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，再看到赋值成功，所以延时是可以解决这个问题，但是不稳定，最好的方法还是使用弹出插件。