今天用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, );
} 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的语法不规范，有时候各种不规范都可以运行，有时候难免会出现错误。