基于JavaScript的定时事件实现方法的研究

韩蒙蒙 李欣

摘 要：在开发动态网页和网络游戏的脚本编写过程中，经常涉及到间隔循环执行某些任务的情况，我们通常称为定时事件。setInterval（）和setTimeout（）两个方法都可以用于实现定时事件。经过深入研究这两种定时事件方法，从使用方法到实现效果，对二者进行了分析比较，得出了它们的异同点及适用场景。

关键词：setInterval；setTimeout；定时事件

一、前言

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型、基于对象的语言，并且它内置支持类型。目前经常被用于Web应用开发中，比如在网页中加入一些动态的功能，为用户提供更流畅美观的浏览效果。在浏览动态网页的过程中，我们会看到图片自动切换，这就用到了JavaScript中的定时事件技术来实现页面定时自动完成一些操作。

二、定时事件功能通过setInterval（）方法实现

通过setInterval（）方法可以实现定时事件功能，它的语法如下：

setInterval（参数1，参数2）；

其中，参数1是需要执行的代码字符串，可以是一个函数名；参数2表示的是时间间隔，是以毫秒为单位的，当过了参数2的时间段之后就会执行那段相应的代码，而且以时间间隔参数2为周期，不停的重复执行代码。

在下面的例1中，我们通过setInterval（）方法来实现每隔1秒钟重复弹出窗口的效果，执行代码之后提示框将会每隔1秒自动弹出，直到浏览器窗口关闭，或者转到了另外一个页面为止。例1代码如下：

functiontimedMsg（）{

var a=setInterval（“alert（‘1 seconds！）”，1000）

}

三、定时事件功能通过setTimeout（）方法实现

要实现定时事件功能，除了setInterval（）方法，我们还可以用setTimeout（）方法。它的语法如下：

setTimeout（参数1，参数2）；

这两个参数的含义和setInterval（）方法中的两个参数含义一样，实现的功能也是当过了参数2的时间段之后就会执行参数1那段相应的代码，但是setTimeout（）方法不循环执行，只执行一次。

在下面的例2中，点击按钮1秒钟后会弹出一个提示框，只弹出一次，不周期性重复弹出。例2代码如下：

functiontimedMsg（）{

var a=setTimeout（“alert（‘1 seconds！）”，1000）

}

所以，要想用setTimeout（）方法来定期重复的执行参数1的代码，这就需要在执行的代码中再调用自己，即使用递归函数。

接下来，我们使用setTimeout（）方法来实现例1中每隔1秒钟重复弹出窗口的效果，也就是提示框先弹出一次，之后每隔1秒自动弹出，直到浏览器窗口关闭，或者转到了另外一个页面为止。代码如下：

functiontimedMsg（）{

alert（‘1seconds！）；

setTimeout（“timedMsg（）”，1000）；

}

四、setInterval（）方法和setTimeout（）方法的相同之处

setTimeout（）方法和setInterval（）方法的语法是一样的。它们都包含两个参数，setInterval（参数1，参数2）和setTimeout（参数1，参数2）中，参数1都是需要执行的代码字符串，指定了在第二个参数指定的时间间隔中做些什么，可以是一个函数名；参数2都表示的是时间间隔，是以毫秒为单位的，当过了参数2的时间段之后就会执行那段相应的代码。

1.用setInterval（）实现定时事件

vartev；

functioninit（）{

tev = setInterval（increase，1000）；

}

function increase（）{

document.f.sec.value = String（1+Number（document.f.sec.value））；

}

function stop（）{

clearInterval（tev）；

}

2.用setTimeout （）实现定时事件

vartev；

functioninit（）{

document.form.sec.value=String（1+Number（document.form.sec.value））；

tev1 = setTimeout（“init（）”，1000）；

}

function stop（）{

clearTimeout（tev）；

}

五、setInterval（）与setTimeout（）两种方法的不同之处

setTimeout（参数1，参数2）方法与setInterval（参数1，参数2）方法都可以作为实现定时事件的方法，但最后实现的效果却不太相同。其中，setInterval（）方法是在执行完参数1事件的代码之后，經过了参数2所设定的时间间隔之后，还会自动的重复执行参数1所包含事件的代码，即每隔一定时间间隔去反复执行一个事件；而setTimeout（）方法在经过参数2所设定的时间间隔之后，只执行一次那段代码，即只执行一次事件。但可以通过创建重复循环的方法来调用setTimeout（）的函数，来实现自动重复执行事件的操作。

六、总结

通过上述的分析我们可以总结：setTimeout（）方法与setInterval（）方法都可以用来实现定时事件的效果，但是使用的方法不尽相同。其中，setTimeout（）方法需要通过在参数中调用自身才能实现连续不断的循环的效果，而setInterval（）方法则不需要调用自身就可以实现连续循环。而且，这两种方法实现的定时事件的效果也有一定的差别，我们要根据实际的需求，对两种方法进行正确分析，最终做出合理的选择。setTimeout（）方法可以保证两次执行的定时事件之间的延迟时间保持固定值不变，所以如果遇到定时事件中调用了比较复杂、执行时间较长的函数，而又不想在频繁调用时产生混乱，使用setTimeout（）方法比较好；setInterval（）方法是按照当初设定的时间周期严格执行，所以如果需要比较精确的定时事件，而且事件能在设定的时间间隔内执行完毕，则使用该方法比较合适。

参考文献：

[1]Jeremy Keith.JavaScript DOM编程艺术[M].北京：人民邮电出版社，2007.

[2]Nicholas C.Zakas.JavaScript高级程序设计[M].北京：人民邮电出版社，2006.

[3]Flanagan.Javascript权威指南[M].北京： 机械工业出版社，2007.

[4]张大富，黄中敏.JavaScript动态网页编程实例手册[M].北京：海洋出版社，2005.

（作者单位：河南师范大学）