JS倒计时

Question

我试图在registered.php页面上显示一个倒计时，它显示一个从3秒开始然后逐秒下降的计时器，最后重定向到另一个页面。 但是，当我在浏览器中加载页面时，我会立即重定向到另一页面。有人可以帮我找出原因吗？

    The registration was successful, you will be redirected in <span id="num"></span> seconds.
    <script>
        $(document).ready(function (){
            for (var i = 3; i>0; i--) {
                setTimeout(function () {
                    $("#num").html(i);
                },1000);
            }
            window.location.replace("login.html");
        });
    </script>

Answer 1

由于这是一个重定向页面，您可能不希望为这段代码包含整个jQuery库：

var remaining = 3;

function countdown() {
    document.getElementById('num').innerHTML = remaining;
    if (!remaining--) {
        window.location.replace("login.html");
    }
    setTimeout(countdown, 1000);
}

window.onload = countdown;

JS Fiddle Demo

Answer 2

正确的方法：

$(document).ready(function () {
    var i = 3;
    $("#num").html(i);
    setInterval(function () {
        if(i==0){window.location.replace("login.html");}
        i--;
        $("#num").html(i > -1 ? i : 0);
    }, 1000);

});

setInterval会每秒执行一次该函数，但是使用你拥有的代码，你只需将setTimeout设置为在一秒钟之后执行，但它并没有阻止你进一步循环。所以你立即设置了三个超时，然后重定向。

Answer 3

$(document).ready(function () {
    var timer = 3;
    var clearTime = setInterval(function(){
        $("#num").html(timer--);
         if(timer == 0){
             window.clearInterval(clearTime);
             window.location.replace("login.html");
         }
    },1000);
});