setInterval()函数的用法心得

最近在用setInterval()函数实现一个倒计时功能，倒计时结束则跳转到另一个页面。

遇到的问题如下：

有问题的代码：

var isLogin = getCookie("isLogin");    var num = 5;    if (isLogin != 1) {        // 显示遮罩层        $("#bg_background").show();        $("#prompt_msg").show();        // 倒计时5s        // $("#time").text(num);

        var time_id = setInterval(function(){             $("#time").text(num);             num--;

                    console.log(num);             if( num < 0){                clearInterval(time_id);             }        },1000);        location.href="../user/login.html?url=当前浏览器的url";

如果将代码，写成这样的话，发现当页面一打开的话，过了一秒就转到另一个页面了，而本来显示倒计时的标签没有数值。

在调试的过程中，将

 location.href="../user/login.html?url=当前浏览器的url";这句话注释掉后，发现num输出值是符合要求的，说明当没有加跳转链接前，代码正常运行。

现在在 location.href="../user/login.html?url=当前浏览器的url";的前面加上语句：console。log("output here");

 var isLogin = getCookie("isLogin");    var num = 5;    if (isLogin != 1) {        // 显示遮罩层        $("#bg_background").show();        $("#prompt_msg").show();        // 倒计时5s        // $("#time").text(num);        var time_id = setInterval(function(){             $("#time").text(num);             num--;             if( num < 0){                // location.href="../user/login.html?url=当前浏览器的url";                clearInterval(time_id);             }        },1000);    console.log("output here");    location.href="../user/login.html?url=当前浏览器的url";

输出结果是：

output here

num:0

从输出的结果，我们可以发现，
console.log("output here");语句比定时器里面的语句先执行的快。也就是说，按照上面的写法，当页面加载的时候，当流程走到定时器函数的时候，程序并不会一
直停在定时器函数里面，而是并行的执行下面的语句，也就是执行跳转页面语句，此时定时器函数还没有执行完。即也就是为什么页面加载完时候，会马上跳转页面了。
解决方法：将跳转语句放在定时器函数里面：如下面所示：
这是显示正常的代码：
 var isLogin = getCookie("isLogin");    var num = 5;    if (isLogin != 1) {        // 显示遮罩层        $("#bg_background").show();        $("#prompt_msg").show();        // 倒计时5s        // $("#time").text(num);        var time_id = setInterval(function(){             $("#time").text(num);             num--;             if( num < 0){                location.href="../user/login.html?url=当前浏览器的url";                clearInterval(time_id);             }        },1000);
总结：如果我们想实现定时功能，时间到就执行相应操作，要把该操作放在判断定时器结束的判断条件里面，也就是把操作放在定时器函数里面。
不能把操作和定时器函数放在并行的位置。
      在c等语言里面，程序都是按照顺序执行的，但是在Js里面特别，当在定时函数的后面还有相应操作的语句，那么浏览器不会等到定时器结束才执行定时器函数后面的
语句，而是并行执行。也就是定时时间还没到，就执行定时函数后面的语句了