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

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

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Test</title>
  6.     <style>
  7.         body{
  8.             background: RGBA(38,38,38,1);
  9.             color:red;
  10.             font-family: 楷体;
  11.             font-weight: bold;
  12.             font-size: 35px;
  13.         }
  14.     </style>
  15. <script>
  16.     var i = 4;
  17.     var oP=null;
  18.     window.onload = function() {
  19.         oP = document.getElementById('p');
  20.         clock();
  21.     }
  22.     function clock() {
  23.         i = i - 1;
  24.         if (i > 0) {
  25.             oP.innerHTML = "窗口将在" + i + "秒后自动关闭!";
  26.             setTimeout(clock, 1000);
  27.         } else {
  28.             closewin();
  29.         }
  30.     }
  31.     function closewin() {
  32.         self.opener = null;
  33.         self.close();
  34.     }
  35. </script>
  36. </head>
  37. <body>
  38.     <p>正在退出系统......</p>
  39.     <p id="p"></p>
  40.  
  41. </body>
  42. </html>

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Test</title>
  6.     <style>
  7.         body{
  8.             background: RGBA(38,38,38,1);
  9.             color:red;
  10.             font-family: 楷体;
  11.             font-weight: bold;
  12.             font-size: 35px;
  13.         }
  14.     </style>
  15.     <script>
  16.         var i = 4;
  17.         var oP=null;
  18.         window.onload = function() {
  19.             oP = document.getElementById('p');
  20.             clock();
  21.             function clock() {
  22.                 i = i - 1;
  23.                 if (i > 0) {
  24.                     oP.innerHTML = "窗口将在" + i + "秒后自动关闭!";
  25.                     setTimeout("clock()", 1000);
  26.                 } else {
  27.                     closewin();
  28.                 }
  29.             }
  30.             function closewin() {
  31.                 self.opener = null;
  32.                 self.close();
  33.             }
  34.         }
  35.  
  36.     </script>
  37. </head>
  38. <body>
  39.     <p>正在退出系统......</p>
  40.     <p id="p"></p>
  41.  
  42. </body>
  43. </html>

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Test</title>
  6.     <style>
  7.         body{
  8.             background: RGBA(38,38,38,1);
  9.             color:red;
  10.             font-family: 楷体;
  11.             font-weight: bold;
  12.             font-size: 35px;
  13.         }
  14.     </style>
  15.     <script>
  16.         var i = 4;
  17.         var oP=null;
  18.         window.onload = function() {
  19.             oP = document.getElementById('p');
  20.             clock();
  21.             function clock() {
  22.                 i = i - 1;
  23.                 if (i > 0) {
  24.                     oP.innerHTML = "窗口将在" + i + "秒后自动关闭!";
  25.                     setTimeout(clock, );
  26.                 } else {
  27.                     closewin();
  28.                 }
  29.             }
  30.             function closewin() {
  31.                 self.opener = null;
  32.                 self.close();
  33.             }
  34.         }
  35.  
  36.     </script>
  37. </head>
  38. <body>
  39.     <p>正在退出系统......</p>
  40.     <p id="p"></p>
  41.  
  42. </body>
  43. </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. linq group by max 多表链接实例

    SELECT s.* FROM dbo.ERG_TipOffsInfo s, (SELECT Data,MAX(Createtime) max_Time FROM dbo.ERG_TipOffsInf ...

  2. C# 将短时间格式变长正常时间格式

    DateTime dateTimeStart = TimeZone.CurrentTimeZone.ToLocalTime(new DateTime(1970, 1, 1));             ...

  3. The implementation details of the built thermal setup

    Lucid infrared thermography of thermally-constrained processors

  4. .Net Webconfig连接字符串中数据库实例名带'\'的问题

    获取前: 获取后: 导致sa登录失败的问题 string strCon = "workstation id=localhost;packet size=4096;user id=" ...

  5. !important

    当你需要确保某元素具有指定的 CSS 时,你可以使用!important. 举例如下: color: pink !important;

  6. P1906联合权值

    描述 无向连通图 G 有 n 个点,n-1 条边.点从 1 到 n 依次编号,编号为 i 的点的权值为 WiWi, 每条边的长度均为 1.图上两点(u, v)的距离定义为 u 点到 v 点的最短距离. ...

  7. ant 的详细的入门教程

    Ant是一个Apache基金会下的跨平台的构件工具,它可以实现项目的自动构建和部署等功能.在本文中,主要让读者熟悉怎样将Ant应用到Java项目中,让它简化构建和部署操作. 一．            ...

  8. SQL Server 2008 R2 下移动数据库的存储位置

    使用场景:1. 该数据库增长的较大,存储磁盘空间不足:   2. 在特定情况下该数据库需要移动到另外一块磁盘上(呵呵...我的情况就是之前的磁盘要还给别人) 步骤: 1. 新建查询 SELECT na ...

  9. java的 new 关键字

    java的new关键字想必大家都知道这是实例化一个对象.没错,也是为新对象分配内存空间. 比如new MyDate(22,7,1964)这样一个案例,他的完成需要四部: 一.为新对象分配内存空间,将M ...

  10. C++多态（二）——函数重载（overloading）和操作符重载

       任何函数都能重载. 一.普通函数的重载 C语言中一个函数只能处理一个类型的数据,不可能兼顾两种或多种数据类型:C++使用使用同一名称的函数来处理多个类型的数据. #include <ios ...