<!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 這個什么原因呢,怎么破
uj5u.com熱心網友回復：
你想讓他的執行有先后順序，但其實這兩行代碼是同步執行的，你可以輸出或者打斷點看一下。所以你可能需要加一個判斷uj5u.com熱心網友回復：
<!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
uj5u.com熱心網友回復：
除了定時器沒有辦法讓他們同步執行嗎uj5u.com熱心網友回復：
js代碼是從上到下執行的，你的div實際上已經顯示了，然后再彈出的框。不信你可以把alert('OK')改為彈出div的class試試。但是因為某些機制（雖然我知道有，但是我不知道具體是什么原因），這個框會先彈出來把你頁面后續的行程都卡在那。
uj5u.com熱心網友回復：
如果只是想在頁面運行的時候有彈窗，建議用div+淡入淡出寫一個。或者用一些彈窗插件uj5u.com熱心網友回復：
remove('hide').onpropertychange(function(){alert（‘0k’）})試試uj5u.com熱心網友回復：
這樣alert失效了
uj5u.com熱心網友回復：
怎么失效了？有什么提示？
uj5u.com熱心網友回復：
js本身是同步的；這個是瀏覽器渲染機制，js 執行完了 但是瀏覽器渲染還沒完成 就執行了alert alert 會暫停瀏覽器的渲染；uj5u.com熱心網友回復：
alert就是這樣,除非你不用uj5u.com熱心網友回復：
你的理解有問題，他其實就是先顯示，后彈出的。<!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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/47096.html
標籤：JavaScript
上一篇：關于事件委托的問題