BUG fix: debounce

src/components/milkdown/MilkdownEditorWrapper.vue

@@ -74,9 +74,8 @@ onBeforeMount(() => {
   }
 })
 
-const saveMarkdown = (editorMarkdown: string) => {
+const saveMarkdown = (editorMarkdown: string) =>
-  // Create a debounce function
+  debounce(() => {
-  const debouncedUpdateContent = debounce(() => {
     /**
      * Editor is in edit mode
      */
@@ -105,9 +104,6 @@ const saveMarkdown = (editorMarkdown: string) => {
       replyRewrite.value.content = editorMarkdown
     }
   }, 1007)
-
-  debouncedUpdateContent()
-}
 </script>
 
 <!-- MilkdownEditorWrapper.vue -->

src/components/milkdown/components/Title.vue

@@ -46,8 +46,7 @@ const handleInput = () => {
     return
   }
 
-  // Create a debounce handling function
+  return debounce(() => {
-  const debouncedInput = debounce(() => {
     /**
      * Editor is in reply mode
      */
@@ -63,8 +62,6 @@ const handleInput = () => {
       rewriteTitle.value = topicTitle.value
     }
   }, 300)
-
-  debouncedInput()
 }
 </script>
 

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>

src/utils/debounce.ts

@@ -1,20 +1,16 @@
-/*
+export const debounce = <F extends (...args: any[]) => any>(
- * Debounce function that takes a function and a delay time as parameters
+  fn: F,
- */
+  time: number
-export type DebouncedFunction<T extends (...args: any[]) => any> = (
+): ((...args: Parameters<F>) => void) => {
-  ...args: Parameters<T>
+  let timeoutID: NodeJS.Timeout | null = null
-) => void
 
-export function debounce<T extends (...args: any[]) => any>(
+  return function (...args: Parameters<F>) {
-  func: T,
+    if (timeoutID !== null) {
-  delay: number
+      clearTimeout(timeoutID)
-): DebouncedFunction<T> {
+    }
-  let timeoutId: ReturnType<typeof setTimeout>
 
-  return (...args) => {
+    timeoutID = setTimeout(() => {
-    clearTimeout(timeoutId)
+      fn(...args)
-    timeoutId = setTimeout(() => {
+    }, time)
-      func(...args)
-    }, delay)
   }
 }

src/views/topic/components/comment/CommentPanel.vue

@@ -22,17 +22,11 @@ const emits = defineEmits<{
 const commentValue = ref('')
 
 // Handle comment input
-const handleInputComment = () => {
+const handleInputComment = () =>
-  // Create a debounced processing function
+  debounce(() => {
-  const debouncedUpdateContent = 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