VUE 轮询、轮询终止 beforeRouteLeave
2024-10-20 05:28:56
目录
1 在data中定义
2 在methods中定义
3 开始轮询
4 终止轮询
方法一： destroyed()
方法二：beforeRouteLeave(to, from, next) 推荐
所有代码
轮询：polling
1 在data中定义
data() {
return {
polling: ''
}
},
2 在methods中定义
methods: {
getDateLoop(timeout = 15000) { // timeout可以写死，也可以动态
console.log('查询'); // 执行语句
this.polling = setInterval(() => {
console.log('查询'); // 轮询中，执行语句
}, timeout)
},
},
3 开始轮询
created() {
this.getDateLoop(); // 开始轮询
},
在当前页面不停打印，说明轮询成功
4 终止轮询
方法一： destroyed()
这个方法，反复跳转后会失效（有点奇怪），所以转用方法二
失效原因：开发的网页是SPA-单页面应用，每次页面跳转，都是由路由机制管理，刷新的只有网页内容。（因为这个销毁过程失灵时不灵，所以博主猜测：）页面跳转的时候不一定会销毁这个组件所以这个方法失灵时不灵。
destroyed() {
clearInterval(this.polling) // 结束轮询
},
跳转页面后，停止打印，说明轮询停止
方法二：beforeRouteLeave(to, from, next) 推荐
beforeRouteLeave(to, from, next){ // 路由跳转前，清除轮询
next();
if (this.polling) {
clearInterval(this.polling);
this.polling = null;
}
},
所有代码
data() {
return {
polling: ''
}
},
methods: {
getDateLoop(timeout = 15000) { // timeout可以写死，也可以动态
console.log('查询'); // 执行语句
this.polling = setInterval(() => {
console.log('查询'); // 轮询中，执行语句
}, timeout)
},
},
created() {
this.getDateLoop(); // 开始轮询
},
// destroyed() {
// clearInterval(this.polling) // 结束轮询
// },
beforeRouteLeave(to, from, next){ // 路由跳转前，清除轮询
next();
if (this.polling) {
clearInterval(this.polling);
this.polling = null;
}
},
结尾
本文主要是向介绍了用的很少的钩子函数（关键时候是真好使啊）
最新文章
- 分享iOS开发常用（三方类库，工具，高仿APP，实用网站，技术干货）
- 关于SequeezeNet中的Fire Module
- RecyclerView notifyDataSetChanged不起作用
- FW开发代码规范---小任性（1）
- Linux之awk命令详解
- 在多线程环境下使用HttpWebRequest或者调用Web Service(连接报超时问题)
- 【代码】ini 文件读取工具类
- Hard-Margin SVM（支持向量机）
- 让阿里云的Centos，PHP组件 ImageMagick支持png和jpeg格式
- python 零散记录(四) 强调字典中的键值唯一性 字典的一些常用方法
- [转] restrict关键字用法
- Javascript闭包与作用域
- Android在子线程中更新UI(二)
- Intellij idea使用Junit
- shell编辑crontab任务
- Unity UGUI图文混排源码(四) -- 聊天气泡
- 用存储过程向数据库添加大量数据【mysql】
- HotSpot 的垃圾收集器
- sql查询一个字段不同值并返回
- Solr的Filed中indexed与stored属性
热门文章
- Java：ArrayList的基本使用（学习笔记）
- 读书笔记《A Philosophy of Software Design - John Ousterhout 软件设计哲学》
- 让 Serverless 更普惠，阿里云函数计算 FC 宣布全面降价，最大幅度达 37.5%
- 支持 equals 相等的对象(可重复对象)作为 WeakHashMap 的 Key
- 重学c#系列——委托和匿名函数[二十五]
- <二>派生类的构造过程
- -webkit-box-orient:vertical 编译报错之autoprefixer问题
- C++编程笔记(STL学习)
- 18V降压3.3V，15V降压3.3V的降压IC和LDO芯片方案
- 保存sklearn中模型的两种方法（pickle、joblib)