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秒钟将请求发送到服务器，并拉出新消息。

但是问题是，当用户使用“ router-link”切换对话时，路由器视图上的“对话”组件将刷新，并且新的对话进入该视图。它还开始为新对话提取消息。

但是会触发新会话组件的“创建”方法，并再次调用“ this.loadNewMessages（）”。这开始了另一个递归拉。

现在，我有两个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);
}