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

正确的方法：

$(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 2

由于这是一个重定向页面，您可能不想为这段代码包含整个 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 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);
});