我设置的定时器是点击展示子组件的时候开启,等待30s后没有点击页面就关闭子组件,每次点击页面30s内没有点击也会关闭,当我点击退出子组件页面的时候也会关闭定时器
// 父组件展示子组件时开启定时器
this.$refs.manMachine.openOrCloseTime(true)
在子组件中定义定时器的名字以及用来计数的变量
// 开启定时器
openOrCloseTime(isOpen){
// 父组件调用方法时传参来决定是否开启定时器
if(isOpen==true){
timer=setInterval(()=>{
this.count--
// 当计数变量值变为0时关闭定时器
if(this.count==0){
this.close(timer);
}
},1000)
}else{
this.close(timer);
}
},
// 关闭定时器
close(timer){
clearInterval(timer);
// 把计数变量恢复初始值,以供下次使用
this.count=30;
// 修改父组件传过来的控制子组件是否展示的变量值,来关闭子组件
this.$emit("update:isChat", this.show);
},
在关闭页面的时候记得调用一下关闭定时器的方法
在对页面进行操作后,恢复计数变量初始值this.count=30,让定时器重新进行计时