清除nuxt.js构建上的时间间隔和超时

Question

在我的网站上，我为轮播设置了一些时间间隔和超时。现在，我确实在组件destroyed()生命周期挂钩上清除了它们。但是我仍然收到此构建警告。

这是我的组件之一的示例

<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>

现在，我认为这将清除这些计时功能，但是，我仍然收到此警告。

我在做错什么吗？有没有其他方法可以清除构建中的所有计时功能？

编辑

我100％确定我已经清理了destroyed()生命周期挂钩上的所有计时功能

Answer 1

使用SSR时不会调用destroyed()生命周期挂钩。您可以在这里SSR component lifecycle hooks

了解更多信息

这意味着您不能使用它来清除服务器上的超时。

您可以通过将间隔函数移动到mounted()或beforeMount()生命周期挂钩中来解决此问题，因为它们仅在客户端调用。

在您的示例中，您可以将代码更改为

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

这将防止nuxt.js构建超时。