javascrip执行顺序问题

来源：互联网发布：l2tp拨号软件编辑：程序博客网时间：2024/05/29 18:43

今天在做项目的时候，发现当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，再看到赋值成功，所以延时是可以解决这个问题，但是不稳定，最好的方法还是使用弹出插件。

阅读全文

0 0