JavaScript两种定时器的使用

一、定义

定时器就是在一段特定的时间后执行某段程序代码。

二、定时器的使用

1、setTimeout

setTimeout(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）调用一次函数的定时器

• 第一个参数 func , 表示定时器要执行的函数名
• 第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
• 第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。

<script> 
    function hello(){ 
        alert('hello'); 
    } 

    // 0.5s后执行一次函数的定时器
    setTimeout(hello, 500);
</script>

2、setInterval函数的参数说明:

setInterval(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）重复调用一个函数的定时器

• 第一个参数 func , 表示定时器要执行的函数名
• 第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
• 第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。

<script> 
    function hello(){ 
        alert('hello'); 
    } 
    // 每隔1s重复执行函数的定时器
    setInterval(hello, 1000);
</script>

三、清除定时器

1、clearTimeout:

clearTimeout(timeoutID) ：清除只执行一次的定时器(setTimeout函数)
timeoutID 为调用 setTimeout 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setTimeout 所设定的定时执行操作。

<script>
    function hello(){
        alert('hello');
        // 清除只执行一次的定时器
        clearTimeout(t1)
    }
    
    // 执行一次函数的定时器
    t1 = setTimeout(hello, 3000);
    // 还没到5s 清除定时器
    hello();
</script>

2、 clearInterval:

clearInterval(timeoutID)： 清除反复执行的定时器(setInterval函数)
timeoutID 为调用 setInterval 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setInterval 所设定的定时执行操作。

<script> 
    function hello(){ 
        alert('hello'); 
    } 
    // 重复执行函数的定时器
    var t1 = setInterval(hello, 1000);

    function stop(){
        // 清除反复执行的定时器
        clearInterval(t1); 
    }  

</script> 

<input type="button" value="停止" onclick="stop();">

四、总结

• 定时器的创建
  只执行一次函数的定时器, 对应的代码是setTimeout函数
  反复执行函数的定时器, 对应的代码是setInterval函数
• 清除定时器
  清除只执行一次函数的定时器, 对应的代码是clearTimeout函数
  清除清除反复执行的定时器, 对应的代码是clearInterval函数