javascript - 关于Js记时器的一个小问题-PHP中文网问答

想实现“新年倒记时还有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;
            }
        }
    


    新年倒计时：5

方法二：

        window.onload = function () {
            //设置定时器，重复执行函数countDown()
            var t = setInterval("countDown()", 1000);
        }
        //定义函数
        function countDown() {
            for(n=5; n>0;n--){
                document.getElementById("num").innerHTML = n;
            }
        }
    


    新年倒计时：5

方法三：

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;
            }
        }
    


    新年倒计时：5

全部回复(6)

迷茫2017-04-11 11:09:38 6楼

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

赞 +0

添加回复

迷茫2017-04-11 11:09:38 5楼

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

迷茫2017-04-11 11:09:38 4楼

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

天蓬老师2017-04-11 11:09:38 3楼

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

ringa_lee2017-04-11 11:09:38 2楼

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);

PHP中文网2017-04-11 11:09:38 1楼

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