這個問題在這里已經有了答案： 如何一一下拉子選單？[重復] (1 個回答) 回圈內的 JavaScript 閉包——簡單實用的例子 （44 個回答） 如何在 JavaScript 回圈中添加延遲？ (34 個回答) 3 天前關閉。
為什么此代碼中的 setTimeOut 不起作用？我正在一一顯示子選單，我不確定方式是否好，有人告訴我關閉有問題
代碼 ：
function changestyle(){
var els = document.getElementsByClassName("submenu");
for(var i = 0; i < els.length-1; i )
{
const showone = function(){
els[i].style.display = 'block';
};
const hideone = function(){
els[i].style.display = 'none';
};
setTimeout(showone, 2000);
setTimeout(hideone, 2000);
}
}
uj5u.com熱心網友回復：
顯示和隱藏的時間在碰撞。你可以試試 setTimeout(hideone, 3000); 而不是 setTimeout(hideone, 2000);
uj5u.com熱心網友回復：
正如評論中指出的那樣，這不起作用，因為 div 是“同時”顯示和隱藏的，因此不會有任何可見的效果。
你可以用一個小輔助函式來解決這個問題，它會在 2 秒超時后解決一個承諾。使您的功能異步并等待它。
const changestyle = async () => {
var els = document.getElementsByClassName("submenu");
for(var i = 0; i < els.length; i ) {
const showone = () => {
els[i].style.display = 'block';
}
const hideone =() => {
els[i].style.display = 'none';
}
showone();
await awaiter();
hideone();
await awaiter();
}
}
const awaiter = () => {
return new Promise(resolve => {
setTimeout(resolve, 2000);
});
}
changestyle().submenu {
width: 30px;
height: 30px;
background-color: blue;
display: none;
}<div class="submenu"></div>
<div class="submenu"></div>
<div class="submenu"></div>uj5u.com熱心網友回復：
請參考這個。它可能適用于您的情況。
function changestyle(){
var els = document.getElementsByClassName("submenu");
for(var i = 0; i < els.length-1; i ) {
els[i].style.display = 'block';
const hideone = function(){
els[i].style.display = 'none';
};
setTimeout(hideone, 2000);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/395904.html
標籤：javascript css dom