VueJS路由组件在路由更改时清除递归setTimeout()

Question

我正在使用VueJS前端和PHP后端构建一个实时刷新的消息应用程序。我使用setTimeout((从后端提取新消息，如下所示：-

var Conversation = Vue.component('conversation',{
data: function(){
return {
refresh_timer: null,
messages: [],
conversation_id: window.CONVERSATION_ID,
route: window.ROUTE
}
},
created : function(){
// Starting the recursive call
this.loadNewMessages();
},
destroyed () {
clearTimeout(this.refresh_timer);
},
methods: {
loadNewMessages(){
let lastMessage = this.messages[this.messages.length - 1];
axios.get(this.route, {
params: {
conversation_id: this.conversation_id,
last_message: lastMessage.id
}
}).then(res => {
if (res.status == 200){
this.messages.push(...res.data.messages);
setTimeout(this.loadNewMessages, 5000);
}
}).catch(error => console.log(error));
}
},
beforeRouteUpdate (to, from, next) {
// Refreshing the timer
clearTimeout(this.refresh_timer);
next();
}
}

我还在路由器视图上使用"：key"来在路由更改时完全更新组件。

<router-view :key="$route.path"></router-view>

这一切都很好。当会话打开时，会频繁地拉取新消息，每5秒就会向服务器发送一个请求，并拉取新的消息。

但问题是，当用户使用"路由器链接"切换对话时，路由器视图上的"对话"组件会被刷新，新的对话就会出现在视图中。它还开始为新的对话提取消息。

但会触发新会话组件的"created"方法，并再次调用"this.loadNewMessage(("。这开始了另一次递归拉动。

现在我有两个setTimeout((函数每5秒调用一次。每当会话发生更改时，都会启动一个新的setTimeout((。

如果用户在一个页面中更改对话10次，则会在该页面上启动并运行10个不同的递归setTimeout((。"destroyed"或"beforeRouteUpdate"中的clearTimeout((似乎不起作用。我该如何解决此问题？

Answer 1

您永远不会保存setInterval返回的令牌。

这应该解决它：

if (res.status == 200){
this.messages.push(...res.data.messages);
this.refresh_timer = setTimeout(this.loadNewMessages, 5000);
}