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里面特别,当在定时函数的后面还有相应操作的语句,那么浏览器不会等到定时器结束才执行定时器函数后面的
语句,而是并行执行。也就是定时时间还没到,就执行定时函数后面的语句了


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值