js中setTimeout()的使用bug

最新推荐文章于 2022-05-10 17:29:39 发布

weixin_34252686

最新推荐文章于 2022-05-10 17:29:39 发布

阅读量401

点赞数

文章标签： javascript ViewUI

今天用setTimeout()时，遇到一个奇怪的现象，通过多方面的查询，最终解决了问题，这是setTimeout()设计的时候存在的一点点bug。

代码的作用主要是在三秒后自动关闭本浏览器窗口：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        body{
            background: RGBA(38,38,38,1);
            color:red;
            font-family: 楷体;
            font-weight: bold;
            font-size: 35px;
        }
    </style>
<script>
    var i = 4;
    var oP=null;
    window.onload = function() {
        oP = document.getElementById('p');
        clock();        
    }
    function clock() {
        i = i - 1;
        if (i > 0) {
            oP.innerHTML = "窗口将在" + i + "秒后自动关闭!";
            setTimeout(clock, 1000);
        } else {
            closewin();
        }
    }    
    function closewin() {
        self.opener = null;
        self.close();
    }    
</script>
</head>
<body>
    <p>正在退出系统......</p>
    <p id="p"></p>

</body>
</html>

运行结果：结果正常，数字可以从3变到1

修改代码：修改后，代码运行，数字停留在3后不会动，主要调整是把clock()和closewin()放在了window.onload()里面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        body{
            background: RGBA(38,38,38,1);
            color:red;
            font-family: 楷体;
            font-weight: bold;
            font-size: 35px;
        }
    </style>
    <script>
        var i = 4;
        var oP=null;
        window.onload = function() {
            oP = document.getElementById('p');
            clock();        
            function clock() {
                i = i - 1;
                if (i > 0) {
                    oP.innerHTML = "窗口将在" + i + "秒后自动关闭!";
                    setTimeout("clock()", 1000);
                } else {
                    closewin();
                }
            }    
            function closewin() {
                self.opener = null;
                self.close();
            }    
        }

    </script>
</head>
<body>
    <p>正在退出系统......</p>
    <p id="p"></p>

</body>
</html>

然后我把setTimeout()改为用setInterval()函数后，上面两个代码都可以解决，在这段代码里，setTimeout()和setInterval()都是起到同样的作用，那就是递归。

为什么会出现这样的情况？

看下面我修改后的代码，仅仅动了一行代码，就是下面标红的地方，仅仅把引号和括号去了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        body{
            background: RGBA(38,38,38,1);
            color:red;
            font-family: 楷体;
            font-weight: bold;
            font-size: 35px;
        }
    </style>
    <script>
        var i = 4;
        var oP=null;
        window.onload = function() {
            oP = document.getElementById('p');
            clock();        
            function clock() {
                i = i - 1;
                if (i > 0) {
                    oP.innerHTML = "窗口将在" + i + "秒后自动关闭!";
                    setTimeout(clock, 1000);
                } else {
                    closewin();
                }
            }    
            function closewin() {
                self.opener = null;
                self.close();
            }    
        }

    </script>
</head>
<body>
    <p>正在退出系统......</p>
    <p id="p"></p>

</body>
</html>