Clear timers and event listeners before component unmounts

Author: Arooba-git

docs/src/components/CodeExample.vue

@@ -12,10 +12,12 @@ import IconJavaScript from "./IconJavaScript.vue"
 import IconSvelte from "./IconSvelte.vue"
 import IconAngular from "./IconAngular.vue"
 import IconNuxt from "./IconNuxt.vue"
-import { computed, ref } from "vue"
+import { computed, ref, onBeforeUnmount } from "vue";
 import { vAutoAnimate } from "../../../src"
 import "../../assets/prism.css"
 
+const timeOutID = ref();
+
 type LanguageOption =
   | "react"
   | "preact"
@@ -77,10 +79,14 @@ const copyStatus = ref(false)
 function copyCode(value: string) {
   window.navigator.clipboard.writeText(value)
   copyStatus.value = true
-  setTimeout(() => {
+  timeOutID.value = setTimeout(() => {
     copyStatus.value = false
   }, 2000)
 }
+
+onBeforeUnmount(() => {
+  clearTimeout(timeOutID.value);
+});
 </script>
 
 <template>

docs/src/components/Navigation.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref, onBeforeUnmount } from "vue";
 import IconDown from "./IconDown.vue"
 import PoliteAd from "./PoliteAd.vue"
 import { vAutoAnimate } from "../../../src/index"
 
+const controller = new window.AbortController();
+
 const show = ref(false)
 const activeTitle = ref("Docs Navigation")
 
@@ -25,8 +27,18 @@ if (typeof window !== "undefined") {
   clearTimeout(resizeTimer)
   window.addEventListener("resize", () => {
     resizeTimer = setTimeout(applySizing, 200)
+
+    this.$once('hook:beforeUnmount', () => {
+      clearTimeout(resizeTimer);
+    });
+  }, {
+    signal: controller?.signal
   })
 }
+
+onBeforeUnmount(() => {
+  controller.abort();
+});
 </script>
 
 <template>

docs/src/components/TheLogo.vue

@@ -13,6 +13,10 @@ onMounted(() => {
       clearInterval(interval)
     }
   }, duration)
+
+  this.$once('hook:beforeUnmount', () => {
+    clearInterval(interval);
+  });
 })
 </script>
 

docs/src/examples/cards/ActualCards.vue

@@ -1,7 +1,9 @@
 <script setup>
-import { ref } from "vue"
+import { ref, onBeforeUnmount } from "vue";
 import { vAutoAnimate } from "../../../../src/index"
 
+const timeOutID = ref();
+
 const showForm = ref(false)
 const cards = ref([
   {
@@ -20,10 +22,14 @@ const cards = ref([
 
 function createCard(card) {
   cards.value.unshift(card)
-  setTimeout(() => {
+  timeOutID.value = setTimeout(() => {
     showForm.value = false
   }, 300)
 }
+
+onBeforeUnmount(() => {
+  clearTimeout(timeOutID.value);
+});
 </script>
 
 <template>

docs/src/examples/disable/ActualDisable.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref, onBeforeUnmount } from "vue";
 import { useAutoAnimate } from "../../../../src/vue"
 
+const intervalID = ref();
+
 const balls = ref(["red", "green", "blue"])
 const [parent, enable] = useAutoAnimate({ duration: 500 })
 
@@ -10,9 +12,14 @@ function toggle() {
   isEnabled.value ? enable(false) : enable(true)
   isEnabled.value = !isEnabled.value
 }
-setInterval(() => {
+
+intervalID.value = setInterval(() => {
   balls.value.push(balls.value.shift()!)
 }, 600)
+
+onBeforeUnmount(() => {
+  clearInterval(intervalID.value);
+});
 </script>
 
 <template>

docs/src/examples/disable/disable.vue

@@ -1,7 +1,9 @@
 <script setup>
-import { ref } from "vue"
+import { ref, onBeforeUnmount } from "vue";
 import { useAutoAnimate } from "../../../../src/vue"
 
+const intervalID = ref();
+
 const balls = ref(["red", "green", "blue"])
 const [parent, enable] = useAutoAnimate({ duration: 500 })
 
@@ -10,9 +12,14 @@ function toggle() {
   isEnabled.value ? enable(false) : enable(true)
   isEnabled.value = !isEnabled.value
 }
-setInterval(() => {
+
+intervalID.value = setInterval(() => {
   balls.value.push(balls.value.shift()!)
 }, 600)
+
+onBeforeUnmount(() => {
+  clearInterval(intervalID.value);
+});
 </script>
 
 <template>