首页 > > 网页制作 > Javascript >

javascript--setTimeout定时器

2019-01-11 08:33:32来源：博客园阅读 ()

setTimeout（）可以理解为定时炸弹 ---------------->隔一段事件执行，并且只会执行一次

函数语法：

setTimeout（参数1，参数2）

参数1：待执行的函数，可以在方法里面写匿名函数，也可以在外面写好函数，这里直接传入函数名

参数2：执行函数触发到执行的时间间隔，单位是毫秒 1s=1000ms

返回值：整形数据，用来标识定时器。页面中很多个定时器，每个定时器都有自己的标识符

清除定时器的方法：

clearTimeout(参数3)

参数3：定时器的标识符

详细代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>setTimeout</title>
 6     </head>
 7 
 8     <body>
 9         <!-- 两个按钮，一个“开始”，一个“取消” -->
10         <input type="button" id="btnStart" value="开始" />
11         <input type="button" id="btnEnd" value="取消" />
12         
13         <!-- 插入JS -->
14         <script>
15             
16             var timeId;//存放定时器的标识
17             // 给"开始"按钮注册点击事件,在事件中插入一个定时器
18             var btnStart=document.getElementById('btnStart');
19             btnStart.onclick=function(){
20                 
21                 //setTimeout(参数1，参数2)
22                 //参数1:要执行的函数,可以是匿名函数,也可以是已经定义好的函数
23                 //参数2:待执行函数的执行间隔,单位是毫秒  1s=1000ms
24                 //返回值:是一个整数,用以标识定时器,以后要关闭该定时器,就是通过该标识符找到该定时器
25 //                 setTimeout(function(){
26 //                     console.log('要爆炸了');
27 //                 },2000);
28                 
29                 //定时器要执行的函数
30                 function fn(){
31                     console.log('要爆炸了');
32                 }
33                 timeId=setTimeout(fn,2000);
34             }
35             
36             // 给"取消"按钮注册点击事件,在事件中取消定时器
37             var btnEnd=document.getElementById('btnEnd');
38             btnEnd.onclick=function(){
39                 //通过定时器标识符取消定时器
40                 clearTimeout(timeId);
41             }
42         </script>
43     </body>
44 </html>