JavaScript 对象指既可以保存一组不同类型的数据(属性),又可以包含有关处理这些数据的函数(方法)的特殊数据类型。JS 对象可以使用两种方式获得,一是开发人员自定义;二是由 ECMAScript 提供。由 ECMAScript 提供的对象称为 JavaScript 内置对象。
JS 常用的 JavaScript 内置对象有:window 对象、Array 对象、String 对象、Date 对象、Math对象和 RegExp 等对象。本节教程主要介绍 window 对象中的定时器的创建和清除的相关方法,其他内容之后介绍。
window 对象提供了定时器功能。定时器的功能是:在规定的时间自动执行某个函数。根据执行的机制,定时器分为间歇定时器和延迟(超时)定时器,前者是每间歇一段时间就会执行指定的函数;后者是在指定的时间到期后就会执行指定的函数。间歇定时器会以指定的间歇时间作为周期循环不断地执行函数;而延迟定时器则只在时间到期时执行一次函数。
间歇定时器的创建使用 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>
延迟定时器的创建使用 window 对象的 setTimeout() 方法,创建格式如下:
定时器对象ID = setTimeout(函数调用|函数定义,毫秒, [arg1], [arg2], ...);
setTimeout 和 setInterval 的不同之处在于:setInterval 可以循环不断地执行指定操作,而 setTimeout 只能执行一次参数指定的操作。不过,通过对 setTimeout() 的递归调用,可以让 setTimout() 达到与 setInterval() 同样的循环不断执行操作的目的。
和间歇定时器一样,延迟定时器也可以通过其返回的 ID 来清除。清除延迟定时器的格式如下:
上面是不是看起来没有什么区别,但是setTimeout方法不会每隔5秒钟就执行一次函数,它是在每次调用setTimeout后过5秒钟再去执行函数。这意味着如果函数的主体部分需要1秒钟执行完,那么整个函数则要每6秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚,它只是简单地每隔一定时间就重复执行一次那个函数。
ps: 注意上面的第一个参数如果传入的是一个函数名称,不能包含“()”,单纯传一个名称进去即可,因为定时器期望的是一个对函数的引用,而如果传入的函数包含"()",会直接被执行,然后传入的是执行后函数的返回值