JavaScript----定时器

2023-12-28 23:41:27

1. 定时器的介绍

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

2. 定时器的使用:

js 定时器有两种创建方式:

  1. setTimeout(func[, delay, param1, param2, ...]) :以指定的时间间隔(以毫秒计)调用一次函数的定时器
  2. setInterval(func[, delay, param1, param2, ...]) :以指定的时间间隔(以毫秒计)重复调用一个函数的定时器

setTimeout函数的参数说明:

  • 第一个参数 func , 表示定时器要执行的函数名
  • 第二个参数 delay, 表示时间间隔,默认是0,单位是毫秒
  • 第三个参数 param1, 表示定时器执行函数的第一个参数,一次类推传入多个执行函数对应的参数。
<script> 
    function hello(){ 
        alert('hello'); 
    } 

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

setInterval函数的参数说明:

  • 第一个参数 func , 表示定时器要执行的函数名
  • 第二个参数 delay, 表示时间间隔,默认是0,单位是毫秒
  • 第三个参数 param1, 表示定时器执行函数的第一个参数,一次类推传入多个执行函数对应的参数。
<script> 
    function hello(){ 
        alert('hello'); 
    } 
    // 重复执行函数的定时器
    setInterval(hello, 1000);
</script>

2. 清除定时器

js 清除定时器分别是:

  • clearTimeout(timeoutID) 清除只执行一次的定时器(setTimeout函数)
  • clearInterval(timeoutID) 清除反复执行的定时器(setInterval函数)

clearTimeout函数的参数说明:

  • timeoutID 为调用 setTimeout 函数时所获得的返回值,使用该返回标识符作为参数,可以取消该 setTimeout 所设定的定时执行操作。
<script>
    function hello(){
        alert('hello');
        // 清除只执行一次的定时器
        clearTimeout(t1)
    }
    // 执行一次函数的定时器
    t1 = setTimeout(hello, 500);
</script>

clearInterval函数的参数说明:

  • timeoutID 为调用 setInterval 函数时所获得的返回值,使用该返回标识符作为参数,可以取消该 setInterval 所设定的定时执行操作。
<script> 
    function hello(){ 
        alert('hello'); 
    } 
    // 重复执行函数的定时器
    var t1 = setInterval(hello, 1000);

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

</script> 

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

5. 小结

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

文章来源:https://blog.csdn.net/qq_42755734/article/details/135279765
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。