javascrip执行顺序问题

最新推荐文章于 2022-09-09 14:53:38 发布

游子清

最新推荐文章于 2022-09-09 14:53:38 发布

阅读量271

点赞数

分类专栏： JavaWeb 前端文章标签： html javascript

本文链接：https://blog.csdn.net/u012963866/article/details/77703828

版权

JavaWeb 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

今天在做项目的时候，发现当alert存在时，会导致代码执行顺序不一致。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input id="idi"/>
		<input type="button" id="idc" οnclick="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" οnclick="test()"/>
	</body>
	
	<script>
		function test() {
			document.getElementById("idi").value="这是遮罩层";
			setTimeout(function(){
				alert("这是遮罩层");
			},100);
			
		}
	</script>
	
</html>

这样既可。

alert会阻塞线程，因为javascript是单线程的。

实际上当执行test方法时，顺序是：执行赋值语句->alert->浏览器绘制至页面上。

因为alert执行的时候，浏览器还没有来得及给input赋值，所以就会导致我们先看到alert，再看到赋值成功，所以延时是可以解决这个问题，但是不稳定，最好的方法还是使用弹出插件。

游子清

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascrip执行顺序问题

今天在做项目的时候，发现当alert存在时，会导致代码执行顺序不一致。 function test() { document.getElementById("idi").value="这是遮罩层"; alert("这是遮罩层"); } 当点击按钮时，显示的效果是先alert，点击确定后才给input赋值。
复制链接

扫一扫