基于JavaScript的计时器实现方法研究

周剑强

（忻州职业技术学院，山西忻州 034000）

在动态网页中，我们经常会看到自动切换图片的幻灯片效果和滚动文字效果。这些效果都需要页面定时自动完成一些操作，这时候就用到了JavaScript中的计时器技术。

1 两种计时器的使用方法

1.1 用setInterval（）方法计时

在浏览器对象模型（BOM）中，Window对象有一种方法可以实现计时功能，就是setInterval（），它的语法如下:

setInterval（code，millisec）;

其中，第一个参数code是要执行的代码字符串，第二个参数millisec是以毫秒为单位的延迟时间。实现的功能是延迟millisec毫秒后执行code代码，并且以millisec为周期，不停地重复执行code代码。

下面的实例中，我们使用setInterval（）方法让网页中的图像定时自动切换，代码如下:

在本例中有三个图片，分别是img1.jpg、img2.jpg、img3.jpg，网页上只有一个＜img＞标签。先定义了一个函数img_change（），它的功能是让＜img＞标签的图像源在三个图片之间切换。然后给＜body＞标签设定了一个onload事件，通过onload事件来触发setInterval（）方法，实现的效果是每隔2000毫秒执行一次img_change（）函数，也就是每隔2秒种切换一次图片。

1.2 用setTimeout（）方法计时

除了setInterval（）方法，Window对象的 setTimeout（）方法也可以实现计时功能。它的语法如下:

setTimeout（code，millisec）;

其中两个参数的含义和setInterval（）方法一样，实现的功能也是延迟millisec毫秒后执行code代码。不同的是，它只执行一次code代码，不作周期性的重复。所以，要想用setTimeout（）方法定期重复执行code代码，就需使用递归函数，也就是要在执行的代码中再调用自己。

下面我们使用setTimeout（）方法来实现例1中的效果，代码如下:

本例中，把setTimeout（）方法写在了img_change（）函数内部，而setTimeout（）本身又调用了img_change（）函数作为第一个参数，通过这种方法实现了对img_change（）函数的循环调用。

2 计时器的停止和重复启动问题

当setTimeout（）方法被设定为定期循环执行后，可以使用if...else语法设定一个条件让它停止执行，也可以使用window对象的另一个方法让它停止，就是clearTimeout（）方法，使用方法如下:

myID=setTimeout（code，millisec）;

clearTimeout（myID）;

使用setTimeout（）方法时会返回一个值，该值是一个整数，它是唯一标识该计时器的ID号。使用clearTimeout（）方法，以计时器的ID号为参数，就可以停止该计时器。对于使用setInterval（）方法的计时器，clearInterval（）方法也可以让它停止，其语法与clearTimeout（）方法完全相同。下面的实例中，我们使用setTimeout（）和clearTimeout（）来起动和停止计时，代码如下:

本例中，先定义两个函数countstart（）和countstop（），其功能分别是开始计时和停止计时。页面中的单行文本框用于显示累计的时间，以秒为单位。另外两个按钮，分别用来触发countstart（）函数和countstop（）函数。页面加载后，单击第一个按钮开始计时，文本框中的数字每秒加1，单击第二个按钮时计时停止。需要注意的是，当我们多次单击第一个按钮时，会发现文本框中数字的变化会加快，而且此时要想停止计时，需多次单击第二个按钮。之所以会出现这种现象，是因为每单击一次开始计时按钮就会启动一个countstart（）函数，而每一个countstart（）函数都会导致文本框中数字的变化。如果把这样的计时器应用到网页中，当用户不小心多次点到开始计时按钮，就会导致计时器失灵。为了解决这个问题，需要在程序中引入一个变量作为标记，用它来记录计时是否已开始，如果计时已开始，开始计时按钮将不再可用，从而避免了用户的误操作。依据这种原理，我们对例3中的JavaScript代码作如下更改:

本例中总共定义了三个函数，变量mark用来记录计时是否已开始。在第一个函数中，当计时开始时给mark赋值为1。而在第三个函数中，使用if语句进行判断，只有mark的值为0时才可以开始计时。这样就避免了对计时器的重复启动。

3 两种计时器实现效果的差异

setTimeout（）方法和setInterval（）方法都可以用于计时，但实现的最终效果有所不同。setTimeout（code，millisec）这句代码是要在millisec毫秒的延时后执行code，如果执行code本身需要200毫秒的时间，那么计时器的实际循环周期为millisec+200;setInterval（code，millisec）这句代码严格以millisec为周期重复执行code，如果执行code代码需要200毫秒的时间，那么执行之前的延时为millisec-200，计时器的循环周期还是millisec。如果code代码的执行时间超过了millisec，计时器会忽略本次执行，等到下一个周期开始再执行。

4 总结

通过上述研究我们看到，setTimeout（）方法和setInterval（）方法都可以实现计时功能，使用方法稍有不同，setTimeout（）方法需要在参数中调用自身才能实现不断的循环。两种方法实现的计时器效果也有差别，我们要从计时器的功用出发，根据实际需求进行选择。setInterval（）方法严格按照既定周期执行，所以如果要精确计时，最好使用该方法;而setTimeout（）方法保证了两次执行之间的延时保持不变，所以如果计时器调用的函数比较复杂，执行时间较长，而又不想在频繁调用时引起混乱，最好使用setTimeout（）方法。

［1］Stephen Chapman.JavaScript By Example-setTimeout［EB/OL］.http://javascript.about.com/od/byexample/a/function-settimeout-example.htm，2011.

［2］Jeremy Keith.JavaScript DOM 编程艺术［M］.北京:人民邮电出版社，2007.

［3］Nicholas C.Zakas.JavaScript高级程序设计［M］.北京:人民邮电出版社，2006.

［4］Flanagan.Javascript权威指南［M］.北京:机械工业出版社，2007.

［5］张大富，黄中敏.JavaScript动态网页编程实例手册［M］.北京:海洋出版社，2005.