首页 技术 正文
技术 2022年11月9日
0 收藏 368 点赞 3,303 浏览 2013 个字

今天用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

js中setTimeout()的使用bug

修改代码:修改后,代码运行,数字停留在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>

js中setTimeout()的使用bug

然后我把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, );                } else {                    closewin();                }            }            function closewin() {                self.opener = null;                self.close();            }        }    </script></head><body>    <p>正在退出系统......</p>    <p id="p"></p></body></html>

此时,数字又可以动,一切都正常了。

总结:

   setTimeout()在使用的时候虽然可以用setTimeout(“方法名()”,毫秒数);

 但是不要用,因为在内部使用的的时候会出现找不到这个函数的问题,在谷歌浏览器中按F12可以看到,建议一直使用和setInterval()一样的,直接使用方法名字即可,由于js的语法不规范,有时候各种不规范都可以运行,有时候难免会出现错误。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,083
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,558
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,407
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,180
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,817
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,900