首页 > 编程笔记 > JavaScript笔记

JS定时器：setInterval()和setTimeout()

JavaScript 对象指既可以保存一组不同类型的数据（属性），又可以包含有关处理这些数据的函数（方法）的特殊数据类型。JS 对象可以使用两种方式获得，一是开发人员自定义；二是由 ECMAScript 提供。由 ECMAScript 提供的对象称为 JavaScript 内置对象。

JS 常用的 JavaScript 内置对象有：window 对象、Array 对象、String 对象、Date 对象、Math对象和 RegExp 等对象。本节教程主要介绍 window 对象中的定时器的创建和清除的相关方法，其他内容之后介绍。

window 对象提供了定时器功能。定时器的功能是：在规定的时间自动执行某个函数。根据执行的机制，定时器分为间歇定时器和延迟（超时）定时器，前者是每间歇一段时间就会执行指定的函数；后者是在指定的时间到期后就会执行指定的函数。间歇定时器会以指定的间歇时间作为周期循环不断地执行函数；而延迟定时器则只在时间到期时执行一次函数。

1. 间歇定时器的创建与清除

间歇定时器的创建使用 window 对象的 setInterval() 方法。在 JS 中，对象方法的调用格式通常为：对象名.方法，但由于 window 对象是全局对象，访问同一个窗口中的方法时，可以省略对象名“window”，所以对 window 对象方法，通常都是直接使用方法。

使用 setInterval() 创建间歇定时器的格式如下：

[定时器对象ID = ]setInterval(函数调用｜函数定义,毫秒);

setInterval() 主要包含两个参数，第一个参数就是定时器需要定时执行的函数，该参数可以是一个用函数名表示的函数调用语句，也可以是一个函数定义语句，示例如下：

function fn(){
     alert("创建间歇定时器");
}
setInterval(fn,1000);//定时器第一个参数为函数调用语句
//以上代码等效下面的代码：
setInterval(function(){
    alert("创建间歇定时器")
},1000);//定时器的第一个参数为函数定义语句，注：其中定义的函数可以是匿名或有名，但通常都定义为匿名

setInterval() 第二参数是一个单位为毫秒的数值（表示执行第一个参数指定操作所需的等待时间）。该方法表示每隔由第二个参数设定的毫秒数，就执行第一个参数指定的操作。setInterval() 执行后将返回一个唯一的数值 ID。

通过定时器返回的 ID，可以清除定时器。清除间歇定时器的格式如下：

clearInterval(定时器对象ID);

下面使用倒计时的示例演示间歇定时器的创建和清除。

【例 1】间歇定时器的创建和清除。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>间歇定时器的创建与清除</title>
<style>
   span{color:red;font-weight:bold;font-size:36px;}
</style>
<script>
   window.onload = function(){
     var oSpan = document.getElementById('day');
     var num = 10;
     var timer = setInterval(function(){//创建定时器
      oSpan.innerHTML = --num;
      if(num == 0){
           clearInterval(timer);//清除定时器
      }
     },86400000);    
};
</script>
</head>
<body>
     倒计时：现在离考试还有<span id="day">10</span>天
</body>
</html>

上述代码的功能是从 num 变量指定的时间开始倒计时，每隔一天（86400000 毫秒）显示一个数值，当 num 变量值为 0 时，最后显示 0 值并停止倒计时。示例代码中使用了间歇定时器实现倒计时功能，计时时间和变量 num 的值对应。为了不让计时时间显示负值，需要在 num 变量的值为 0 时清除定时器，以停止计时。

示例 1 在 Chrome 浏览器中运行结果如图 1 和图 2 所示。

图 1：计时开始时的状态

图 2：计时结束时的状态

2. 延迟定时器的创建和清除

延迟定时器的创建使用 window 对象的 setTimeout() 方法，创建格式如下：

[定时器对象ID = ]setTimeout(函数调用｜函数定义,毫秒);

setTimeout() 主要包含两个参数，第一个参数就是定时器需要定时执行的函数，该参数可以是一个用函数名表示的函数调用语句，也可以是一个函数定义语句；第二个参数是一个单位为毫秒的数值（表示执行第一个参数指定操作所需的等待时间）。该方法表示经过第二个参数所设定的时间后，执行一次第一个参数指定的操作。setTimeout() 执行后同样会返回一个唯一的数值 ID。

setTimeout 和 setInterval 的不同之处在于：setInterval 可以循环不断地执行指定操作，而 setTimeout 只能执行一次参数指定的操作。不过，通过对 setTimeout() 的递归调用，可以让 setTimout() 达到与 setInterval() 同样的循环不断执行操作的目的。

和间歇定时器一样，延迟定时器也可以通过其返回的 ID 来清除。清除延迟定时器的格式如下：

clearTimeout(定时器对象ID);

下面使用 setTimeout() 来修改示例 1 来实现同样的倒计时的功能。

【例 2】延迟定时器的创建和清除。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>延迟定时器的创建与清除</title>
<style>
   span{color:red;font-weight:bold;font-size:36px;}
</style>
</head>
<body>
     倒计时：现在离考试还有<span id = "day">10</span>天
    <script>
     var oSpan = document.getElementById('day');;
     var timer = null;
     var num = 10;
     function count(){
         oSpan.innerHTML = --num;
         timer = setTimeout(count,86400000);//递归调用延迟定时器
         if(num == 0){
              clearTimeout(timer);//清除定时器
         }
     }
     timer = setTimeout(count,86400000);//创建延迟定时器    
     </script>
</body>
</html>

例 2 的功能和例 1 完全相同，由于 setTimeout() 在指定时间到达后只执行一次操作，为了达到与 setInterval() 循环不断执行操作同样的效果，上述代码通过在 count() 中递归调用 setTimeout() 来模拟 setInterval() 的间歇函数调用效果。

我们还使用 JS 定时器来实现了图片轮播功能，有兴趣的读者请猛击：JS定时器实现图片轮播

JS定时器：setInterval()和setTimeout()

1. 间歇定时器的创建与清除

2. 延迟定时器的创建和清除

所有教程

优秀文章