首页 >> js开发 >> jsVue清除定时器setInterval优化方案分享js大全
jsVue清除定时器setInterval优化方案分享js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
两种方案清除定时器,开发者经常使用方案1,建议使用方案2方案1方案1方案1首先我在data函数里面进行定义定时器名称:
data() {
return {
timer: null // 定时器名称
}
},
data() {
return {
timer: null // 定时器名称
}
},然后这样使用定时器:
this.timer = (() => {
// 某些操作
}, 1000)
this.timer = (() => {
// 某些操作
}, 1000)最后在beforeDestroy()生命周期内清除定时器:
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}
方案1有两点不好的地方,引用尤大的话来说就是:方案1有两点不好的地方,引用尤大的话来说就是:它需要在这个组件实例中保存这个 timer,如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题,但是它可以被视为杂物。我们的建立代码独立于我们的清理代码,这使得我们比较难于程序化的清理我们建立的所有东西。方案2方案2方案2该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。以下是完整代码:
const timer = setInterval(() =>{
// 某些定时器操作
}, 500);
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
const timer = setInterval(() =>{
// 某些定时器操作
}, 500);
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
其他程序化的事件侦听器其他程序化的事件侦听器通过 $on(eventName, eventHandler) 侦听一个事件通过 $once(eventName, eventHandler) 一次性侦听一个事件通过 $off(eventName, eventHandler) 停止侦听一个事件附官网详细地址:程序化事件侦听器
程序化事件侦听器补充知识:vue在mounted中创建定时器与清除定时器补充知识:补充知识:vue在mounted中创建定时器与清除定时器我就废话不多说了,大家还是直接看代码吧~
mounted(){
var that=this;
var num = 1;
var ss='';
var a=setInterval(()=>{
a+=10;
if(this num===100){
ss='success';
console.log(ss)
clearInterval(a)
//当num等于100时清除定时器
}
}, 1000);
}
mounted(){
var that=this;
var num = 1;
var ss='';
var a=setInterval(()=>{
a+=10;
if(this num===100){
ss='success';
console.log(ss)
clearInterval(a)
//当num等于100时清除定时器
}
}, 1000);
}
以上这篇Vue清除定时器setInterval优化方案分享就是小编分享给大家的全部内容了,希望能给大家一个参考。
data() {
return {
timer: null // 定时器名称
}
},
data() {
return {
timer: null // 定时器名称
}
},然后这样使用定时器:
this.timer = (() => {
// 某些操作
}, 1000)
this.timer = (() => {
// 某些操作
}, 1000)最后在beforeDestroy()生命周期内清除定时器:
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}
方案1有两点不好的地方,引用尤大的话来说就是:方案1有两点不好的地方,引用尤大的话来说就是:它需要在这个组件实例中保存这个 timer,如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题,但是它可以被视为杂物。我们的建立代码独立于我们的清理代码,这使得我们比较难于程序化的清理我们建立的所有东西。方案2方案2方案2该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。以下是完整代码:
const timer = setInterval(() =>{
// 某些定时器操作
}, 500);
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
const timer = setInterval(() =>{
// 某些定时器操作
}, 500);
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
其他程序化的事件侦听器其他程序化的事件侦听器通过 $on(eventName, eventHandler) 侦听一个事件通过 $once(eventName, eventHandler) 一次性侦听一个事件通过 $off(eventName, eventHandler) 停止侦听一个事件附官网详细地址:程序化事件侦听器
程序化事件侦听器补充知识:vue在mounted中创建定时器与清除定时器补充知识:补充知识:vue在mounted中创建定时器与清除定时器我就废话不多说了,大家还是直接看代码吧~
mounted(){
var that=this;
var num = 1;
var ss='';
var a=setInterval(()=>{
a+=10;
if(this num===100){
ss='success';
console.log(ss)
clearInterval(a)
//当num等于100时清除定时器
}
}, 1000);
}
mounted(){
var that=this;
var num = 1;
var ss='';
var a=setInterval(()=>{
a+=10;
if(this num===100){
ss='success';
console.log(ss)
clearInterval(a)
//当num等于100时清除定时器
}
}, 1000);
}
以上这篇Vue清除定时器setInterval优化方案分享就是小编分享给大家的全部内容了,希望能给大家一个参考。
相关文章:
- JavaScript在vue-cli3中使用axios获取本地json操作
- jsPostman内建变量常用方法实例解析js大全
- js浅谈vue 组件中的setInterval方法和window的不同js大全
- jsAngular+ionic实现折叠展开效果的示例代码js大全
- jsVue props中Object和Array设置默认值操作js大全
- jsvue setInterval 定时器失效的解决方式js大全
- js解决vue cli4升级sass-loader(v8)后报错问题js大全
- jsvue如何使用外部特殊字体的操作js大全
- jsvscode中Vue别名路径提示的实现js大全
- jsvue项目,代码提交至码云,iconfont的用法说明js大全