VueJS Очистка компонента маршрута рекурсивная функция setTimeout () при изменении маршрута - PullRequest
Новая
       71

VueJS Очистка компонента маршрута рекурсивная функция setTimeout () при изменении маршрута

0 голосов
/ 30 апреля 2020

Я создаю приложение для обмена сообщениями с live refre sh, используя VueJS front-end и PHP backend. Я использую 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();
        }
    }

Я также использую «: ключ» в представлении маршрутизатора для полного обновления компонента при изменении маршрута . 

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

Все это прекрасно работает. Когда разговор открыт, новые сообщения часто извлекаются, каждые 5 секунд на сервер отправляется запрос, а новые сообщения извлекаются.

Но проблема в том, что когда пользователь переключает диалог с помощью «router-link», компонент Conversation в представлении маршрутизатора обновляется, и новый вид вступает в представление. Это также начинает вытягивать сообщения для нового разговора.

Но "созданный" метод для нового компонента диалога запускается, и "this.loadNewMessages ()" вызывается еще раз. Который начинает очередную рекурсивную тягу.

Теперь у меня есть две функции setTimeout (), которые вызывают себя каждые 5 секунд. Всякий раз, когда разговор изменяется, запускается новый setTimeout ().

Если пользователь меняет диалог на странице 10 раз, на странице запускается и запускается 10 различных рекурсивных методов setTimeout (). Функция clearTimeout () внутри «destroy» или «beforeRouteUpdate» не работает. Как мне это решить?

1 Ответ

0 голосов
/ 30 апреля 2020

Вы никогда не сохраняете токен, возвращенный setInterval.

Это должно исправить это: 

if (res.status == 200){
   this.messages.push(...res.data.messages);

   this.refresh_timer = setTimeout(this.loadNewMessages, 5000);
}
...