爲不同的代碼塊設置超時時間（對於一個模式）

我已經在Javascript中編寫了一些代碼，在按下按鈕時繪製了一個星形模式。當按下按鈕時，圖案的4個不同部分被附加到4個不同的div上。他們都屬於同一個功能代碼下：爲不同的代碼塊設置超時時間（對於一個模式）

function myFunction() { 
 
    $('#Asterisk').empty(); 
 
    $('#Getafix').empty(); 
 
    $('#upsidedown').empty(); 
 
    $('#downsideup').empty(); 
 
    for (var i = 0; i < 7; i++) { 
 

 
    for (var a = i; a < 7; a++) { 
 

 
     $('#Asterisk').append("*"); 
 

 
    } 
 

 

 
    $('#Asterisk').append("<br>"); 
 

 
    for (var a = i; a > -1; a--) { 
 

 
     $('#Getafix').append("*"); 
 

 
    } 
 
    $('#Getafix').append("<br>"); 
 

 

 
    for (var a = i; a > -1; a--) { 
 

 
     $('#upsidedown').append("*"); 
 

 
    } 
 
    $('#upsidedown').append("<br>"); 
 

 

 

 
    for (var a = i; a < 7; a++) { 
 

 
     $('#downsideup').append("*"); 
 

 
    } 
 
    $('#downsideup').append("<br>"); 
 
    } 
 

 

 

 
} 
 
myFunction();

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

 
<div id="Asterisk"></div> 
 
<div id="Getafix"></div> 
 
<div id="upsidedown"></div> 
 
<div id="downsideup"></div>

現在我需要能夠使所有這些獨立段的單個恆星的出現在一定的時間。即附加到'Asterisk'div的圖案中的第一顆恆星，在按鈕按下2秒後出現，然後第二顆恆星在另外2秒後出現，等等。我知道我可以在Javascript中使用超時函數來實現這一點，但我不確定如何使它適用於不同的代碼塊，而不是使其適用於不同的功能。我不一定需要直接給出代碼的答案，我只是想知道如何實現這一點，以便我可以自己編寫代碼。任何連貫的解釋都可以做到。我的一位朋友建議使用IF條件來製作一個奇數索引的恆星出現2秒，而一個偶數索引將以相同的時間再次出現（或者如果我願意，可以是不同的時間）。但我仍然不確定如何爲各個代碼塊實現Timeout功能，以及它如何在這種情況下工作。

來源

2017-08-03 BrownEyedNinja

要開始，我會建議嘗試將循環邏輯提取到您調用的函數中。任何時候，如果你有一段重複多次的代碼，並且有一定的差異，那麼這是製作一個能夠將這些差異傳遞給你的函數的主要情況。然後，您可以開始研究如何根據需要將超時應用於該邏輯。 – Taplar

@Taplar感謝您提供大綱:)我更感興趣的是學習'它是如何工作的'而不是使其工作，所以這是非常有用的。 – BrownEyedNinja

你需要把超時功能的每個循環中，如果你想放的間隔爲每個*顯示

即

for(var a=i;a<7;a++) { 
    setTimeout(function(){ $('#Asterisk').append("*"); 
     },Your_time_in_milliseconds) 
     }

這樣你neeed去，如果喲把啓動for循環裏面的超時功能，它不會按要求工作，現在嘗試相應地更改代碼，請牢記這一點

來源

2017-08-03 05:30:20

您可能想要在回答中解決setTimeout方法在執行之前如何處理'a'的更改。 – Taplar

@Rahul S R。謝謝你，我想我現在明白了一點。更改代碼時請記住這一點。我會讓你知道它是怎麼回事。 – BrownEyedNinja

爲不同的代碼塊設置超時時間（對於一個模式）

回答

相關問題