vue中的定时器清不掉,vue设置定时器调用方法,vue如何设置定时器和清理定时器

vue中的定时器清不掉,vue设置定时器调用方法,vue如何设置定时器和清理定时器

本文主要介绍vue如何设置和清理定时器,有很好的参考价值。希望对你有帮助。如有错误或不足之处,请不吝赐教。

目录

设置定时器和清除定时器1。声明要在数据2中设置的定时器的名称。在mounted中创建定时器定时器用法1.vue的完整解决方案是用定时器2代码实现的。

设置定时器和清理定时器

带挂钩功能的清洗定时器失败。

1.在data中声明要设置的定时器名称

data() {

返回{

计时器:空//计时器名称

}

},

2.在mounted中创建定时器

this.timer=(()={

//一些操作

},5000)复制代码3。页面注销时清除计时器:beforeDestroy() {

clear interval(this . timer);

this.timer=null

}

然而,鹅没有任何蛋可用。在切换页面之后,预定任务仍然顽强地运行。

销毁前(){

clear interval(this . timer);

this.timer=null

Console.log(this.timer) //输出为:null,但任务仍在运行。

}

可能我的姿势不对。Shy.jpg在各种论坛中搜索后,发现计时器被$once清零,事件监听器的位置在计时器被定义后:

const timer=setInterval(()={

//一些定时器操作

}, 5000);

//通过$once监听定时器

//触发beforeDestroy挂钩时清除计时器

这个。$once('hook:beforeDestroy ',()={

clearInterval(定时器);

})

哇,成功了。

定时器的使用全解

1.vue使用定时器

在vue中使用定时器,很多情况下,当你进入和退出vue界面时,并没有清除定时器,导致很多定时器一起工作。这肯定是不能接受的。接下来,你应该在用户进入界面时启动定时器,在用户离开当前界面时清除定时器。

2代码实现

模板

/模板

脚本

从“@/store”导入商店

从“vue”导入Vue

导出默认值{

名称:“测试”,

data () {

返回{

计时器:空

}

},

方法:{

setTimer() {

if(this.timer==null) {

this.timer=setInterval( ()={

Console.log('开始计时.每秒’)

}, 1000)

}

}

},

已创建:函数(){

this.getFamilyBase_info()

//每次进入界面,先清空之前所有的定时器,然后启动一个新的定时器。

clearInterval(this.timer)

this.timer=null

this.setTimer()

},

已销毁:函数(){

//每次离开当前界面时清除定时器。

clearInterval(this.timer)

this.timer=null

}

}

/脚本

样式范围

/风格

以上个人经历,希望能给大家一个参考,也希望大家多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: