前端定时器 setInterval 和 setTimeout
前端定时器 setInterval 和 setTimeout
- 1.setInterval 循环执行
- 设置循环执行
- 销毁定时器
- 2.setTimeout 定时执行
- 设置定时执行
- setTimeout超时调用和setInterval 间歇调用的区别：
1.setInterval 循环执行
循环执行就是设置一个时间间隔，每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉。
用法是setInterval（“方法名或方法”，“延时”）， 第一个参数为方法名或者方法，注意为方法名的时候不要加括号，第二个参数为时间间隔（毫秒）。
设置循环执行
this.timer = setInterval(this.updataDevice, 5000)// 第一个参数：this.updataDevice 是ts中的方法，只写方法名不写括号。// 第二个参数：5000 表示延时，毫秒，5000毫秒=5秒，即执行完本次后，隔5秒再次执行
销毁定时器
用vue举例：
beforeDestroy() { // 组件销毁前执行clearInterval(this.timer) // 清除定时器this.timer = null // 定时器的变量赋值null},
顺便例一下vue的生命周期函数：
beforeCreate: function () {console.group('beforeCreate 创建前状态===============》》');},created: function () {console.group('created 创建完毕状态===============》》');},beforeMount: function () {console.group('beforeMount 挂载前状态===============》》');//已被初始化},mounted: function () {console.group('mounted 挂载结束状态===============》》');},beforeUpdate: function () {alert("更新前状态");console.group('beforeUpdate 更新前状态===============》》'); //这里指的是页面渲染新数据之前alert("更新前状态2");},updated: function () {console.group('updated 更新完成状态===============》》');},beforeDestroy: function () {console.group('beforeDestroy 销毁前状态===============》》');},destroyed: function () {console.group('destroyed 销毁完成状态===============》》');}
2.setTimeout 定时执行
定时执行setTimeout是设置一个时间，等待时间到达的时候只执行一次，但是执行完以后定时器还在，只是没有运行。
用法是 setTimeout(“方法名或方法”, “延时”); 第一个参数为方法名或者方法，注意为方法名的时候不要加括号，第二个参数为时间间隔。
设置定时执行
setTimeout(() => {this.showMarker() // 执行的方法}, 1000) // 时间 1000毫秒 = 1秒
3. setTimeout超时调用和setInterval 间歇调用的区别：
setTimeout超时调用和setInterval 间歇调用，二者接受的参数相同，区别只在于:
setTimeOut(function(){},1000); 在特定时间之后调用函数，只调用一次；
setInterval(function(){},1000)；每隔特定的时间调用一次函数，调用n多次,最好不要经常使用；
水深无声
今天药忘吃喽~
我就是我
向右看齐
╰+哭是因爲堅強的太久メ
Bertha 。
还没有评论，来说两句吧...