关于Js记时器的一个小问题

想实现“新年倒记时还有5秒钟”效果，试了几种方法，主要问题在于for循环和while循环。使用方法一时能正常实现，但用方法二和方法三时就会出现从5秒直接跳到0秒（while循环），或者从5秒直接到2秒（for循环），请大牛帮忙解释下原理。

方法一：

 var n = 5;
        window.onload = function () {
            //设置定时器，重复执行函数countDown()
            var t = setInterval("countDown()", 1000);
        }
        //定义函数
        function countDown() {
            //判断n是否大于0，因为倒计时不可能有负数
            if (n > 0){
                n--;
                document.getElementById("num").innerHTML = n;
            }
        }
    </script>
</head>
<body>
    <p>新年倒计时：<span id="num">5</span></p>

方法二：

        window.onload = function () {
            //设置定时器，重复执行函数countDown()
            var t = setInterval("countDown()", 1000);
        }
        //定义函数
        function countDown() {
            for(n=5; n>0;n--){
                document.getElementById("num").innerHTML = n;
            }
        }
    </script>
</head>
<body>
    <p>新年倒计时：<span id="num">5</span></p>

方法三：

var n = 5;
        window.onload = function () {
            //设置定时器，重复执行函数countDown()
            var t = setInterval("countDown()", 1000);
        }
        //定义函数
        function countDown() {
            //判断n是否大于0，因为倒计时不可能有负数
            while (n > 0){
                n--;
                document.getElementById("num").innerHTML = n;
            }
        }
    </script>
</head>
<body>
    <p>新年倒计时：<span id="num">5</span></p>

function foo(str){
  for(var i = 10;i>0;i--){
    console.log(str,i);
  }
}
foo('foo():');
var times = 0;
var timer = setInterval(function(){
  times++;
  foo(times+'次:');
}, 1000);

讲真，没啥解释的，谁让你用循环呢

这个为什么用循环呀，老老实实的用第一种方法得了呗

for/while循环都执行完了，setInterval有什么用？

一秒钟之后执行了countDown()，然后里面的for循环就迅速执行完了，n就等于0了

莫非你以为用了setInterval之后，你的for循环就变成一秒执行一次了？

【热门文章】