очистить интервалы и тайм-ауты в сборке nuxt.js

Question

На моем веб-сайте у меня есть несколько интервалов и таймаутов для таких вещей, как карусель. Теперь я очищаю их на компоненте destroyed() hook жизненного цикла. Но я все еще получаю это предупреждение о сборке.

Это пример одного из моих компонентов

<script>
  data() {
    return {
      carouselInterval: null
    }
  },
  created() {
    this.startInterval();
  },
  methods: {
    startInterval() {
      this.carouselInterval = setInterval(() => {
         ...
      }, 5000);
    }
  },
  destroyed() {
    clearInterval(this.carouselInterval);
  }
</script>

У меня тоже есть время.

<script>
  data() {
    return {
      testTimeout: null
    }
  },
  created() {
    this.startTimeout();
  },
  methods: {
    startTimeout() {
      this.testTimeout = setTimeout(() => {
         ...
      }, 5000);
    }
  },
  destroyed() {
    clearTimeout(this.testTimeout);
  }
</script>

Теперь я предполагаю, что это очистит эти функции синхронизации, но я все еще получаю это предупреждение.

Есть ли что-то, что я делаю не так? Есть ли другой способ очистить все функции синхронизации при сборке?

EDIT

Я на 100% уверен, что очистил все функции синхронизации на destroyed() ловушке жизненного цикла

Answer 1

Хук жизненного цикла destroyed() не вызывается при использовании SSR. Подробнее об этом можно прочитать здесь Хуки жизненного цикла компонента SSR

Это означает, что вы не можете использовать его для очистки тайм-аутов на сервере.

Вы можете решить эту проблему, переместив ваши интервальные функции так, чтобы они вызывались в хуках жизненного цикла mounted() или beforeMount(), поскольку они вызываются только на стороне клиента.

В вашем примере вы можете изменить свой код на

<script>
  data() {
    return {
      carouselInterval: null
    }
  },
  mounted() {
     this.startInterval();
  },
  methods: {
    startInterval() {
      this.carouselInterval = setInterval(() => {
         ...
      }, 5000);
    }
  }
</script>

Это предотвратит тайм-аут сборки nuxt.js.