其他分享
首页 > 其他分享> > JS定时器:setInterval()和setTimeout()

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

 

 

 

标签:执行,定时器,函数,setInterval,JS,对象,间歇,setTimeout
来源: https://www.cnblogs.com/ryanzheng/p/16438662.html