MK_7529 2022-03-15 12:51 采纳率: 0%
浏览 45
已结题

JS定时器跳转网页在跳转时重新加载页面,无法通过断点调试找到问题原因

今天偶然发现的问题,这是我最初写的代码,目的是实现倒计时结束后跳转网页。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Javascript练习</title>
        <style type="text/css">
            p{
                text-align: center;
            }
            #time{
                color: red;
            }
        </style>
    </head>
    <body>
        <p><span id="time">5</span>秒后自动跳转</p>
        <script type="text/javascript">
            var number = 5;
            var now;
            function timedown(){
                number --;
                if(0 >= number){
                    location.href = "https://www.baidu.com/";
                }else{
                now = document.getElementById("time");
                now.innerHTML = number + "";
                }
            }
            setInterval(timedown,1000);
        </script>
    </body>
</html>

出问题的是这段中的else,如果将设置标签内容的代码用else包裹,则会使页面重新加载,不会跳转到指定网站

function timedown(){
                number --;
                if(0 >= number){
                    location.href = "https://www.baidu.com/";
                }else{
                now = document.getElementById("time");
                now.innerHTML = number + "";
                }
            }
            setInterval(timedown,1000);

如果不加else,页面在倒计时结束后会正常跳转至百度,代码如下所示

function timedown(){
                number --;
                if(0 >= number){
                    location.href = "https://www.baidu.com/";
                }
                now = document.getElementById("time");
                now.innerHTML = number + "";
            }
            setInterval(timedown,1000);

这里的else加与不加有什么区别吗,为什么会出现重新加载页面的现象呢?
非初学者,无需科普else的用法。

问题补充:
使用F12打断点调试的话是可以跳转的,取消断点就会出现上述问题。
浏览器使用的是火狐浏览器。

补充2.0:
这个现象复现的话可能有些困难,我本人机器也不是百分之百可以复现的。
大家无法复现的话,根据代码提供一个理论或者思路也可以。

补充3.0:
这个现象也许只在火狐浏览器中存在,我试了edge和ie都可以正常跳转

  • 写回答

2条回答 默认 最新

  • _念_ 2022-03-15 13:56
    关注

    猜测是定时器的问题,所以在跳转位置,加一个清除定时器的操作试试。

    
    var number = 5, now = document.getElementById("time"), timer = null;
    
    function timedown() {
      number --;
      if (number > 0) {
        now.innerHTML = number;
      } else {
        timer && clearInterval(timer);
        location.href = "https://www.baidu.com/";
      }
    }
    timer = setInterval(timedown, 1000);
    
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 3月24日
  • 修改了问题 3月16日
  • 修改了问题 3月15日
  • 创建了问题 3月15日

悬赏问题

  • ¥20 代码:Python随机森林反演生物量数据处理问题
  • ¥50 微信野豹球杆小程序数据
  • ¥15 Linux系统的命令行窗口回车变成了换行,无法执行命令了
  • ¥15 vb6.0调用ImageMagick进行图片转换问题
  • ¥15 安卓组件化工程引入Arouter报错there's no route matched path[/login/LoginActivity,如何解决?
  • ¥50 如何进行点云姿态调整优化
  • ¥20 关于c++的问题 如何用qt完成
  • ¥15 台达变频器MS300与伺服驱动器B3系列的抱闸与电路设计如何实现
  • ¥20 C++通过HICON获取argb像素数组
  • ¥15 如何利用支持向量机提高分类器正确率和筛选理想分类器