顯示1秒後

Question

我曾嘗試使用下面的代碼創建了一些球每個球：

function game() { 
    for (i = 0; i < 3; i++) { 
     var ball = $("<div>"); 
     ball.prop("class","planets"); 
     ball.prop("id","planet"+i); 
     $("body").append(ball); 
    } 
} 

function showing() { 
    setTimeout(function() { 
     for (i = 0; i < 3; i++) { 
      $("#planet" + i).toggle(); 
     } 
    }, 1000); 
} 

.planets { 
    display: none; 
    border-radius: 100%; 
    background: red; 
    margin: auto; 
} 

<button onclick="game()">Play</button> 
<button onclick="showing()">Show</button> 

現在我的問題。我想創建一個功能，讓每個球在1秒後可見。我已經創建了showing()功能，但它會使所有球一次顯示。有任何想法嗎？

Answer 1

使用setTimeout功能：

setTimeout(showing, 1000); 

第一個參數是一個應執行的功能，第二個參數是毫秒執行它之前要等待的數量。

Answer 2

添加一個計時器，每一個新球后顯示：

function game() { 
     var timer = 1000; 
     for (i = 0; i < 3; i++) { 
      var ball = $("<div>"); 
      ball.prop("class","planets"); 
      ball.prop("id","planet"+i); 
      $("body").append(ball); 
      setTimeout(function() { 
       ball.show(); 
      }, timer * (i+1)); 
     } 
    } 

Answer 3

使用setInterval功能：

interval = setInterval(showing, 1000); 

var i = 0; 
function showing() { 
    $("#planet" + i++).show(); 
    //however many ball you have 
    if(i == 3) 
    { 
    clearInterval(interval); 
    } 
} 

非常相似，setTimeout除了它反覆運行，直到你告訴它停止;第一個參數是函數，第二個是mmilliseconds bewtween每次迭代的

數（1000毫秒= 1秒）如果想要的間隔停止，調用clearInterval：

clearInterval(interval); 

Answer 4

這將顯示點擊「顯示」按鈕1秒鐘後出現一個新球。

function showing() { 
    setTimeout(function() { 
     $('.planets:hidden').eq(0).show(); 
    }, 1000); 
}