JavaScript的定时器延时器
2022/1/30 12:04:26
本文主要是介绍JavaScript的定时器延时器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
定时器
定义
按照设定的时间间隔 循环往复执行程序也就是 按照设定的时间间隔 每间隔设定的时间 执行一次程序事件间隔的单位是 毫秒也就是 按照间隔时间 一直重复执行程序
语法
setInterval( 参数1 , 参数2 )
参数1 执行的函数程序
参数2 时间间隔
参数1的语法形式
语法形式1 匿名函数
语法形式2 函数名称
参数1的语法形式 称为 回调函数 callback
注意
最初的时间间隔内 没有执行程序,时间间隔的设定需要根据电脑的配置设定,60Hz 是 1秒刷新60次 ,刷新一次间隔是 16.66666...毫秒,一般最小值设定20。
<script> // 第一种写法 // 定时器 匿名函数 setInterval(function(){ console.log("大聪明码农徐"); // 时间间隔 },1000); // 第二种写法 // 定时器 函数名称 时间间隔 setInterval(fun,1000); // 封装函数 function fun(){ console.log("大聪明码农徐"); } </script>
运行结果:
延时器
定义
按照设定的时间间隔 延迟执行程序也就是 按照间隔时间 延迟执行 一次程序,且只执行一次
语法
setTimeout( 参数1 , 参数2 )
参数1 执行的函数程序
参数2 时间间隔
参数1的语法形式
语法形式1 匿名函数
语法形式2 函数名称
参数1的语法形式 称为 回调函数 callback
<script> // 第一种写法 // 延时器 匿名函数 setTimeout(function(){ console.log("大聪明码农徐"); // 时间间隔 },3000); // 第二种写法 //延时器 函数名称 时间间隔 setTimeout(fun,3000); // 封装函数 function fun(){ console.log("大聪明码农徐"); } </script>
运行结果:
清除定时器延时器
clearInterval(参数)
clearTimeout(参数)
这两个函数 都是 既可以清除定时器 也可以清除延时器
参数是 定时器 或者 延时器 的 序号编号
定时器 延时器 函数程序的执行结果返回值 就是 定时器延时器的序号编号
定时器延时器 是 公用一个序号编号 序号编号 是 顺延的
<script> // 定时器延时器的执行效果 是 按照间隔的时间 触发 参数1 设定的函数程序 // 定时器延时器的执行结果返回值 是 定时器延时器函数内部定义的return的数值 // 也就是 变量中 存储的是 定时器延时器函数中 return 返回的数据数值 // 也就是 定时器延时器的编号序号 // 延时器 var num1 = setTimeout( function(){console.log(111)} , 1000 ); var num2 = setTimeout( function(){console.log(222)} , 2000 ); var num3 = setTimeout( function(){console.log(333)} , 3000 ); var num4 = setTimeout( function(){console.log(444)} , 4000 ); // 定时器 var num5 = setInterval( function(){console.log(555)} , 1000 ); console.log( num1 ); console.log( num2 ); console.log( num3 ); console.log( num4 ); console.log( num5 ); // 清除的参数是 定时器 延时器 的 序号编号 // 可以 直接定义 数字 // 可以 使用变量 存储 定时器延时器的执行结果返回值 clearInterval( 1 ); clearInterval( num2 ); </script>
这篇关于JavaScript的定时器延时器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求
- 2024-10-01使用 golang 将ETH账户的资产平均分散到其他账户
- 2024-10-01JWT用户校验课程:从入门到实践
- 2024-10-01Server Component课程入门指南