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

在每个新球后添加计时器以显示：

   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 2

使用setTimeout功能：

setTimeout(showing, 1000);

第一个参数是一个应该执行的函数，第二个参数是执行它之前要等待的毫秒数。

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非常相似，除非它反复运行，直到你告诉它停止;第一个参数是函数，第二个参数是每次迭代之间的毫秒数（1000毫秒= 1秒）

如果您希望间隔停止，请拨打clearInterval：

clearInterval(interval);

Answer 4

点击“显示”按钮后，这将显示一个新球1秒钟。

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

1秒后显示每个球

4 个答案: