原文地址:https://blog.csdn.net/saber_H/article/details/125520834
场景:后台有消息更新,但不会主动推送给前端,需要前端实时刷新,获取最新的消息提示
思路:后台每个页面通常都会有 layout 组件,我这里写在 header.vue 中,只要登录成功,
进入 header 相关页面,就开始执行定时器,退出登录,清除定时器,上代码
// 10秒间隔刷新获取最新消息 2022-06-21
let messageTimer = setInterval(() => {
// 业务代码
}, 10000);
this.$on('hook:beforeDestroy', () => {
// 清除定时器
clearInterval(messageTimer);
messageTimer = null;
});
在 mounted 中编写代码,采用 hook 写法,在同一个地方编写,逻辑较为清晰,
但是在使用过程中发现了某些网页会导致不生效,经过排查是 keep-alive 导致的,
所以变更代码进行兼容,代码如下
// 10秒间隔刷新获取最新消息 2022-06-21
let messageTimer = setInterval(() => {
// 业务代码
}, 10000);
this.$on('hook:beforeDestroy', () => {
// 清除定时器
clearInterval(messageTimer);
messageTimer = null;
});
this.$on('hook:activated', () => {
if (messageTimer === null) {
// 避免重复开启定时器
messageTimer = setInterval(() => {
// 业务代码
}, 10000);
}
});
this.$on('hook:deactivated', () => {
// 清楚定时器
clearInterval(messageTimer);
messageTimer = null;
});