各位大神关于dom操作异步问题求指导

liangdapang 2020-05-09 12:48:10

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#test{
width: 100px;
height: 100px;
background-color: red;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id="test" class="hide">弹出提示框</div>
<script type="text/javascript">
document.getElementById("test").classList.remove('hide');

alert('ok');
</script>
</body>
</html>

上述代码我想让他先将 div显示，再弹出ok
但是按照我上面写的代码，他总是先弹出OK 再显示div 这个什么原因呢,怎么破

...全文

418 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

那谁呀撒 2020-05-21

打赏
举报

你的理解有问题，他其实就是先显示，后弹出的。
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#test {
width: 100px;
height: 100px;
background-color: red;
}

.hide {
display: none;
}
</style>
</head>

<body>
<div id="test" class="hide">弹出提示框</div>
<script type="text/javascript">
document.getElementById("test").classList.remove('hide');
if (document.getElementById("test").className != "hide") {
alert('ok');
}
</script>
</body>

</html>

CoderBai 2020-05-18

打赏
举报

alert就是这样,除非你不用

風灬雲 2020-05-18

打赏
举报

js本身是同步的；这个是浏览器渲染机制，js 执行完了但是浏览器渲染还没完成就执行了alert alert 会暂停浏览器的渲染；

仰望星空的代码 2020-05-18

打赏
举报

引用 7 楼巴耶克1 的回复:

[quote=引用 6 楼代码养家的回复:] remove('hide').onpropertychange(function(){alert（‘0k’）})试试

这样alert失效了[/quote] 怎么失效了？有什么提示？

仰望星空的代码 2020-05-12

打赏
举报

remove('hide').onpropertychange(function(){alert（‘0k’）})试试

巴耶克1 2020-05-12

打赏
举报

引用 6 楼代码养家的回复:

remove('hide').onpropertychange(function(){alert（‘0k’）})试试

这样alert失效了

巴耶克1 2020-05-09

打赏
举报

如果只是想在页面运行的时候有弹窗，建议用div+淡入淡出写一个。或者用一些弹窗插件

一支糖包仔 2020-05-09

打赏
举报

js代码是从上到下执行的，你的div实际上已经显示了，然后再弹出的框。不信你可以把alert('OK')改为弹出div的class试试。但是因为某些机制（虽然我知道有，但是我不知道具体是什么原因），这个框会先弹出来把你页面后续的进程都卡在那。

liangdapang 2020-05-09

打赏
举报

除了定时器没有办法让他们同步执行吗

巴耶克1 2020-05-09

打赏
举报

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #test{ width: 100px; height: 100px; background-color: red; } .hide{ display: none; } </style> </head> <body> <div id="test" class="hide">弹出提示框</div> <script type="text/javascript"> document.getElementById("test").classList.remove('hide'); setTimeout(function(){ alert('ok') },500); </script> </body> </html> 可以延时0.5s后触发alert