<!DOCTYPE HTML>
<html>
<body>
<p id=demo>length 属性返回字符串的长度:</p>
<script>
var len = document.getElementById("demo").innerHTML.length;
if(len>=18) //len>=18是判断条件
{ document.write("字符长度大于等于18。");
document.getElementById("demo").innerHTML=null}//会隐藏掉<p>里的内容,但是还是会显示满足条件后返回的内容
else
{ document.write("字符长度小于18。");}
if(document.getElementById("demo").innerHTML=null)
{document.write("p不在");}
else
{ alert("p还在");}//明明p不在了,但是却弹出p还在
</script>
</body>
</html>
问题:alert无论放在JS哪里,都会最先被执行吗?
JavaScript执行原理:
JavaScript 引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行 JavaScript 程序,初衷是为了减少 DOM 等共享资源的冲突。可是单线程永远会面临着一个问题,那就是某一段代码阻塞会导致后续所有的任务都延迟。又由于 JavaScript 经常需要操作页面 DOM 和发送 HTTP 请求,这些 I/O 操作耗时一般都比较长,一旦阻塞,就会给用户非常差的使用体验。
于是便有了事件循环(event loop)的产生,JavaScript 将一些异步操作或 有I/O 阻塞的操作全都放到一个事件队列,先顺序执行同步 CPU代码,等到 JavaScript 引擎没有同步代码,CPU 空闲下来再读取事件队列的异步事件来依次
执行。
分析:
由于页面渲染是 DOM 操作,会被 JavaScript 引擎放入事件队列;
alert()
是 window 的内置函数,被认为是同步 CPU代码;
JavaScript 引擎会优先执行同步代码,alert 弹窗先出现;
alert 有特殊的阻塞性质,JavaScript 引擎的执行被阻塞住;
点击 alert 的“确定”,JavaScript 没有了阻塞,执行完同步代码后,又读取事件队列里的 DOM 操作,页面渲染完成。
解决:
使用setTimeout异步执行,还有其他办法例如替换alert等
setTimeout("alert('msg');", 3000);
同学,希望你能看懂^_^
不是,放在函数里面的话需要调用才会执行,得看你alert放在哪里了