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

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

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

 

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

 

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

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

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

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

 

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

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

带参数的情况：

function sayHi(phrase, who) {
  alert( phrase + ', ' + who );
}

setInterval(sayHi, 1000, "Hello", "John"); // Hello, John

 

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

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

clearInterval(定时器对象ID);

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

<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>

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

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

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

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

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

3. 区别

上面是不是看起来没有什么区别，但是setTimeout方法不会每隔5秒钟就执行一次函数，它是在每次调用setTimeout后过5秒钟再去执行函数。这意味着如果函数的主体部分需要1秒钟执行完，那么整个函数则要每6秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚，它只是简单地每隔一定时间就重复执行一次那个函数。

 

ps: 注意上面的第一个参数如果传入的是一个函数名称，不能包含“()”，单纯传一个名称进去即可，因为定时器期望的是一个对函数的引用，而如果传入的函数包含"()"，会直接被执行，然后传入的是执行后函数的返回值