在制作网页动态效果时,一定会遇到某些需求,要求某段程序等待多时时间后再开始执行,就像在我们的生活中一样,待会儿再开始做一件事。在JavaScript中主要通过定时器实现此类需求,特记录下来备忘。
一、setTimeout
setTimeout()方法用于在指定毫秒数后再调用函数或者计算表达式(以毫秒为单位)
语法:
setTimeout(函数表达式,毫秒数);
setTimeout()只执行函数一次,如果需要多次调用可以使用setInterval(),或者在函数体内再次调用setTimeout()
示例:
<!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <script>
6 setTimeout("alert('hello')",2000);//2000毫秒即2秒后弹出
7 </script>
8 </head>
9 <body>
10 </body>
11 </html>
二、setInterval
setInterval()方法可按照指定的周期来调用函数或者计算表达式(以毫秒为单位)
语法:
setInterval(函数表达式,毫秒数);
setInterval()会不停的调用函数,直到clearInterval()被调用或者窗口被关闭,由 setInterval()返回的ID值可用作clearInterval()方法的参数。
小结:通过以上分析可以看出,setTimeout与setInterval的主要区别是:
1、setTimeout()方法只运行一次,也就是说当达到设定的时间后就出发运行指定的代码,运行完后就结束了,如果还想再次执行同样的函数,可以在函数体内再次调用setTimeout(),可以达到循环调用的效果。
2、setInterval()是循环执行的,即每达到指定的时间间隔就执行相应的函数或者表达式,是真正的定时器。