嘗試setTimeout來顯示和隱藏球

Question

我試圖編寫一個程序來練習我的js技能。有3個球，他們首先被隱藏起來。我想先ball_1出現，1秒後，ball_1消失。接下來，ball_2出現，1秒後消失;同樣的邏輯與ball_3一致。當我運行我的代碼時，前兩個球不會隱藏。我不確定發生了什麼問題。下面的代碼是我寫的html，css和js代碼。希望有人能幫助我。先謝謝你。

$(document).ready(function() { 
 
    var notes = ['ball_1', 'ball_2', 'ball_3']; 
 
    for (i = notes.length; i > 0; i--) { 
 
    var note = notes.shift(); 
 
    $('#' + note).addClass('shown'); 
 
    setTimeout(function() { 
 
     $('#' + note).removeClass('shown'); 
 
    }, 1000); 
 
    } 
 
});

#ball_1 { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #000000; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 
#ball_2 { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #0000FF; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 
#ball_3 { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #7FFF00; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 
#ball_1, 
 
#ball_2, 
 
#ball_3 { 
 
    width: 10px; 
 
    height: 10px; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 
.not_shown { 
 
    display: none; 
 
} 
 
.shown { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div id="ball"> 
 
    <div id="ball_1" class="not_shown"></div> 
 
    <div id="ball_2" class="not_shown"></div> 
 
    <div id="ball_3" class="not_shown"></div> 
 
</div>

Answer 1

您正在尋找事件的asnychronous發揮 - 第一ball_1顯示了1秒和後ball_2顯示了1秒等等。

像這樣的東西是行不通的：

for(var i = 0; i < notes.length; i++){ 
     $('#' + notes[i]).addClass('shown'); 
     setTimeout(function() { 
      $('#' + notes[i]).removeClass('shown'); 
     },1000); 
    } 

因爲timeout旨意註冊一個接一個快速連續地後，所有的球會在小顯示和隱藏一秒多。

所以，你可以創建一個callback並設置之前的球已經充分顯示了1秒後，才進行下一個球超時 - 看演示如下：

$(document).ready(function() { 
 
    var notes = ['ball_1', 'ball_2', 'ball_3']; 
 
    hideBall(notes,0); 
 
}); 
 

 
function hideBall(notes,i) { 
 
    $('#' + notes[i]).addClass('shown'); 
 
    hide(function() { 
 
    if(++i < notes.length) { 
 
     hideBall(notes,i); 
 
    } 
 
    }, notes[i]); 
 
} 
 

 
function hide(callback, note) { 
 
    setTimeout(function() { 
 
     $('#' + note).removeClass('shown'); 
 
     callback(); 
 
    }, 1000); 
 
}

#ball_1 { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #000000; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 
#ball_2 { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #0000FF; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 
#ball_3 { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #7FFF00; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 
#ball_1, 
 
#ball_2, 
 
#ball_3 { 
 
    width: 10px; 
 
    height: 10px; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 
.not_shown { 
 
    display: none; 
 
} 
 
.shown { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div id="ball"> 
 
    <div id="ball_1" class="not_shown"></div> 
 
    <div id="ball_2" class="not_shown"></div> 
 
    <div id="ball_3" class="not_shown"></div> 
 
</div>

Answer 2

通常，當迭代使用for循環從未修改的陣列。 shift方法將從數組中移除第一項，從而修改它的長度。相反，這樣做：

$(document).ready(function() { 
    var notes = ['ball_1','ball_2','ball_3']; 
    var i; // You were declaring "i" in global namespace before. Don't do that. 
    for(i = 0; i < notes.length; i++){ 
    var note = notes[i]; 
    $('#' + note).addClass('shown'); 
     setTimeout(function() { 
     $('#' + note).removeClass('shown'); 
     },1000); 
    } 
}); 

另外，你會從我的筆記中看到，你正在全局命名空間中定義「我」。如果使用「var」，那麼始終確保在功能塊的開頭定義變量永遠不會那麼好。

編輯：錯過了一個分號

EDIT2：徹底無緣，我需要改變了循環條件。

Answer 3

希望這是你所需要的

$(document).ready(function() { 
 
    var notes = ['ball_1','ball_2','ball_3']; 
 
    for(i = notes.length; i > 0; i--){ 
 
     var note = notes[i]; 
 
     $('#' + note).addClass('shown'); 
 
     hideBall(note, i) 
 
    } 
 
}); 
 

 
function hideBall(note) { 
 
    setTimeout(function() { 
 
     $('#' + note).removeClass('shown'); 
 
    },1000 * i); 
 
}

#ball_1{ 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #000000; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 

 
#ball_2{ 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #0000FF; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 

 

 
#ball_3{ 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #7FFF00; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 

 
#ball_1, #ball_2, #ball_3 { 
 
    width: 10px; 
 
    height: 10px; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 

 
.not_shown { 
 
    display: none; 
 
} 
 

 
.shown { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id = "ball"> 
 
     <div id = "ball_1" class = "not_shown"></div> 
 
     <div id = "ball_2" class = "not_shown"></div> 
 
     <div id = "ball_3" class = "not_shown"></div> 
 
    </div>

Answer 4

你正在嘗試將無法工作，因爲它會運行的循環中的所有一氣呵成，設立3倍超時。

嘗試這樣的事情

jQuery(document).ready(function($) { 
function myBallLoop(){ 
    // increment as needed 
    if(typeof note == 'undefined') { 
     var note = 1; 
    } else if (note == 3){ 
     break; // end loop 
    } else { 
     note ++; 
    } 
     // show current ball qickly 
     $('#ball_' + note).show('fast', function(){ 
      // call back after show event 
      // hide current ball after 1 sec 
      r = setTimeout(function(){$('#ball_' + note).hide()}, 1000); 
      // self call function after 2 seconts 
      t = setTimeout(function(){myBallLoop();, 2000} 
     });   

    } 
    // loop start 
    myBallLoop(); 
}); 

Answer 5

充分利用jquery給你的。

使用$ .each進行迭代也與ES5的forEach相同。使用延遲方法來延遲添加類的功能類似於setTimeout。

$(document).ready(() => { 
 
    var notes = ['ball_1','ball_2','ball_3']; 
 

 
    let showBalls = (i, item) => { 
 
    $('#' + item).delay(i * 1000).queue(() => { 
 
     $('#' + item).addClass('shown'); 
 
     $('#' + notes[i - 1]).removeClass('shown').clearQueue(); 
 
    }); 
 
    } 
 
    $.each(notes, (i, item) => { 
 
    showBalls(i, item); 
 
    }); 
 
});

#ball_1{ 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #000000; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 

 
#ball_2{ 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #0000FF; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 

 

 
#ball_3{ 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #7FFF00; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 

 
#ball_1, #ball_2, #ball_3 { 
 
    width: 10px; 
 
    height: 10px; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 

 
.not_shown { 
 
    display: none; 
 
} 
 

 
.shown { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id = "ball"> 
 
    <div id = "ball_1" class = "not_shown"></div> 
 
    <div id = "ball_2" class = "not_shown"></div> 
 
    <div id = "ball_3" class = "not_shown"></div> 
 
</div>