From ad806c430de71b6344016b07fbd6785df774bf4e Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Thu, 7 Mar 2024 20:12:50 +0800
Subject: [PATCH] BUG fix: debounce

---
 .../milkdown/MilkdownEditorWrapper.vue        |  8 ++----
 src/components/milkdown/components/Title.vue  |  5 +---
 src/components/search/SearchBox.vue           |  6 +---
 src/utils/debounce.ts                         | 28 ++++++++-----------
 .../topic/components/comment/CommentPanel.vue | 10 ++-----
 5 files changed, 18 insertions(+), 39 deletions(-)

diff --git a/src/components/milkdown/MilkdownEditorWrapper.vue b/src/components/milkdown/MilkdownEditorWrapper.vue
index 663ca5c4..caac5178 100644
--- a/src/components/milkdown/MilkdownEditorWrapper.vue
+++ b/src/components/milkdown/MilkdownEditorWrapper.vue
@@ -74,9 +74,8 @@ onBeforeMount(() => {
   }
 })
 
-const saveMarkdown = (editorMarkdown: string) => {
-  // Create a debounce function
-  const debouncedUpdateContent = debounce(() => {
+const saveMarkdown = (editorMarkdown: string) =>
+  debounce(() => {
     /**
      * Editor is in edit mode
      */
@@ -105,9 +104,6 @@ const saveMarkdown = (editorMarkdown: string) => {
       replyRewrite.value.content = editorMarkdown
     }
   }, 1007)
-
-  debouncedUpdateContent()
-}
 </script>
 
 <!-- MilkdownEditorWrapper.vue -->
diff --git a/src/components/milkdown/components/Title.vue b/src/components/milkdown/components/Title.vue
index c08ee332..b1e51e10 100644
--- a/src/components/milkdown/components/Title.vue
+++ b/src/components/milkdown/components/Title.vue
@@ -46,8 +46,7 @@ const handleInput = () => {
     return
   }
 
-  // Create a debounce handling function
-  const debouncedInput = debounce(() => {
+  return debounce(() => {
     /**
      * Editor is in reply mode
      */
@@ -63,8 +62,6 @@ const handleInput = () => {
       rewriteTitle.value = topicTitle.value
     }
   }, 300)
-
-  debouncedInput()
 }
 </script>
 
diff --git a/src/components/search/SearchBox.vue b/src/components/search/SearchBox.vue
index c1a33f88..2375802c 100644
--- a/src/components/search/SearchBox.vue
+++ b/src/components/search/SearchBox.vue
@@ -23,10 +23,6 @@ const debouncedSearch = debounce((inputValue: string) => {
   }
 }, 300)
 
-const searchTopics = () => {
-  debouncedSearch(inputValue.value)
-}
-
 watch(
   () => search.value.keywords,
   () => {
@@ -52,7 +48,7 @@ onMounted(() => {
       class="input"
       :placeholder="`${$tm('mainPage.header.search')}`"
       @input="debouncedSearch(inputValue)"
-      @keydown.enter="searchTopics"
+      @keydown.enter="debouncedSearch(inputValue)"
     />
   </div>
 </template>
diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
index fe31545d..fd1b1f50 100644
--- a/src/utils/debounce.ts
+++ b/src/utils/debounce.ts
@@ -1,20 +1,16 @@
-/*
- * Debounce function that takes a function and a delay time as parameters
- */
-export type DebouncedFunction<T extends (...args: any[]) => any> = (
-  ...args: Parameters<T>
-) => void
+export const debounce = <F extends (...args: any[]) => any>(
+  fn: F,
+  time: number
+): ((...args: Parameters<F>) => void) => {
+  let timeoutID: NodeJS.Timeout | null = null
 
-export function debounce<T extends (...args: any[]) => any>(
-  func: T,
-  delay: number
-): DebouncedFunction<T> {
-  let timeoutId: ReturnType<typeof setTimeout>
+  return function (...args: Parameters<F>) {
+    if (timeoutID !== null) {
+      clearTimeout(timeoutID)
+    }
 
-  return (...args) => {
-    clearTimeout(timeoutId)
-    timeoutId = setTimeout(() => {
-      func(...args)
-    }, delay)
+    timeoutID = setTimeout(() => {
+      fn(...args)
+    }, time)
   }
 }
diff --git a/src/views/topic/components/comment/CommentPanel.vue b/src/views/topic/components/comment/CommentPanel.vue
index c4eda3a3..326649c9 100644
--- a/src/views/topic/components/comment/CommentPanel.vue
+++ b/src/views/topic/components/comment/CommentPanel.vue
@@ -22,17 +22,11 @@ const emits = defineEmits<{
 const commentValue = ref('')
 
 // Handle comment input
-const handleInputComment = () => {
-  // Create a debounced processing function
-  const debouncedUpdateContent = debounce(() => {
+const handleInputComment = () =>
+  debounce(() => {
     content.value = commentValue.value
   }, 300)
 
-  // Call the debounced processing function
-  // which will execute the update operation only once within the specified delay
-  debouncedUpdateContent()
-}
-
 // Check if the comment is valid
 const isValidComment = () => {
   // Warning if comment content is empty