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

js中setTimeout()的使用bug的更多相关文章

  1. js中settimeout方法加参数

    js中settimeout方法加参数的使用. 简单使用看w3school  里面没有参数调用,  例子: <script type="text/javascript"> ...

  2. js中setTimeout/setInterval定时器用法示例

    js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 functio ...

  3. 【转】JS中setTimeout和setInterval的最大延时值详解

    前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...

  4. Node.js中setTimeout和setInterval的使用

    Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInter ...

  5. js 中 setTimeout()的用法

    setTimeout()在js类中的使用方法   setTimeout (表达式,延时时间)setTimeout(表达式,交互时间)延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTi ...

  6. js中setTimeout()的使用

    setTimeout()在js类中的使用方法   setTimeout (表达式,延时时间)setTimeout(表达式,交互时间)延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTi ...

  7. js中setTimeout和setInterval的应用方法(转)

    JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function& ...

  8. js中setTimeout()时间参数设置为0的探讨

    起因源于一道前端笔试题: var fuc = [1,2,3]; for(var i in fuc){ setTimeout(function(){console.log(fuc[i])},0); co ...

  9. 兼容性js中setTimeout 传参“保值”方案

    这里所谓“保值”,是指在setTimeout中指定的时间后,执行指定的方法所用到的“参数”值,跟执行setTimeout时该“参数”值一样.是不是有点懵?看如下例子: ================ ...

随机推荐

  1. How to Test Controller Concerns in Rails 4

    Concerns are a new feature that was added in Rails 4. They allow to clean up code in your models and ...

  2. JavaScript-事件周期-点击替换颜色

    事件周期 DOM:3个阶段 1.捕获:从最外层元素,向内层元素,逐个记录绑定的事件处理函数.默认,暂不触发任何事件 2.目标触发:优先触发目标元素绑定的事件处理函数 目标元素:实际点击的元素 3.冒泡 ...

  3. 【记忆化搜索】bzoj1652 [Usaco2006 Feb]Treats for the Cows

    跟某NOIP的<矩阵取数游戏>很像. f(i,j)表示从左边取i个,从右边取j个的答案. f[x][y]=max(dp(x-1,y)+a[x]*(x+y),dp(x,y-1)+a[n-y+ ...

  4. SQL Server 事务、异常和游标

    转自:http://www.cnblogs.com/hoojo/archive/2011/07/19/2110325.html Ø 事务 在数据库中有时候需要把多个步骤的指令当作一个整体来运行,这个整 ...

  5. Alpha、Beta、RC、GA版本的区别 ZT

    http://www.blogjava.net/RomulusW/archive/2008/05/04/197985.html Alpha:是内部测试版,一般不向外部发布,会有很多Bug.一般只有测试 ...

  6. linux Ubuntu(Segmentation fault)段错误出现原因及调试方法

      在linux下编译了一个程序,尝试运行的时候出现: Segmentation fault (core dumped) 初步确认为...完全不知道是什么玩意. 于是找度娘了. ----------- ...

  7. maven清除不同版本的重复依赖

    pom文件加入: <dependencyManagement> <dependencies> <dependency> <groupId>org.spr ...

  8. /proc/sysrq-trigger该文件能做些什么事情-转载

    /proc/sysrq-trigger该文件能做些什么事情呢? # 立即重新启动计算机 (Reboots the kernel without first unmounting file system ...

  9. 原来在linux上切换jdk的版本是这么简单

    上次在linux上切换jdk版本的时候,还配置了半天的环境变量,今天又查了一下,原来是这么的简单 1. 查看相应的jdk是否在 ubuntu的jdk菜单里,查看: (输全哦) update-alter ...

  10. 练习2-3:十六进制数字字符串转换为等价整型值,字符串允许包含的数字包括:0~9、a~f、A~F、x、X(C程序设计语言 第2版)

    #include <stdio.h> #include <string.h> #include <math.h> int htoi(char s[]){ unsig ...