From 1fd0e52e34b0b1ebf86cce33d0bfe0650c31874e Mon Sep 17 00:00:00 2001
From: Aroooba <arooba.shahoor@gmail.com>
Date: Sun, 7 Jan 2024 21:53:50 +0900
Subject: [PATCH] Clear timers and event listeners before component unmounts

---
 docs/src/components/CodeExample.vue         | 10 ++++++++--
 docs/src/components/Navigation.vue          | 18 ++++++++++++++----
 docs/src/components/TheLogo.vue             |  4 ++++
 docs/src/examples/cards/ActualCards.vue     | 10 ++++++++--
 docs/src/examples/disable/ActualDisable.vue | 11 +++++++++--
 docs/src/examples/disable/disable.vue       | 11 +++++++++--
 6 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/docs/src/components/CodeExample.vue b/docs/src/components/CodeExample.vue
index 35fa1c0..f1f5318 100644
--- a/docs/src/components/CodeExample.vue
+++ b/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>
diff --git a/docs/src/components/Navigation.vue b/docs/src/components/Navigation.vue
index db8f671..a581290 100644
--- a/docs/src/components/Navigation.vue
+++ b/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")
 
@@ -19,14 +21,22 @@ const handleClick = () => {
   show.value = window.innerWidth >= 672
 }
 
-let resizeTimer
+const resizeTimer = ref<NodeJS.Timeout | undefined>();
+
 if (typeof window !== "undefined") {
   show.value = window.innerWidth >= 672
-  clearTimeout(resizeTimer)
+  clearTimeout(resizeTimer.value)
   window.addEventListener("resize", () => {
-    resizeTimer = setTimeout(applySizing, 200)
+    resizeTimer.value = setTimeout(applySizing, 200)
+  }, {
+    signal: controller?.signal
   })
 }
+
+onBeforeUnmount(() => {
+  controller.abort();
+  clearTimeout(resizeTimer.value)
+});
 </script>
 
 <template>
diff --git a/docs/src/components/TheLogo.vue b/docs/src/components/TheLogo.vue
index 54b3ec5..3029df6 100644
--- a/docs/src/components/TheLogo.vue
+++ b/docs/src/components/TheLogo.vue
@@ -13,6 +13,10 @@ onMounted(() => {
       clearInterval(interval)
     }
   }, duration)
+
+  this.$once('hook:beforeUnmount', () => {
+    clearInterval(interval);
+  });
 })
 </script>
 
diff --git a/docs/src/examples/cards/ActualCards.vue b/docs/src/examples/cards/ActualCards.vue
index 4f86d3d..0e22b67 100644
--- a/docs/src/examples/cards/ActualCards.vue
+++ b/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>
diff --git a/docs/src/examples/disable/ActualDisable.vue b/docs/src/examples/disable/ActualDisable.vue
index 82919ed..2b14af5 100644
--- a/docs/src/examples/disable/ActualDisable.vue
+++ b/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>
diff --git a/docs/src/examples/disable/disable.vue b/docs/src/examples/disable/disable.vue
index eb4fdbb..4aa238d 100644
--- a/docs/src/examples/disable/disable.vue
+++ b/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>