pref: debounce

src/components/WangEditor.vue

@@ -12,6 +12,8 @@ import { useKUNGalgameEditStore } from '@/store/modules/edit'
 import { storeToRefs } from 'pinia'
 // 导入过滤 xss 的工具
 import DOMPurify from 'dompurify'
+// 导入防抖函数
+import { debounce } from '@/utils/debounce'
 
 const topicData = storeToRefs(useKUNGalgameEditStore())
 
@@ -70,11 +72,14 @@ onBeforeUnmount(() => {
 // 编辑器文本改变时自动保存数据
 const handleChange = (editor: IDomEditor) => {
   editorRef.value = editor
-  // 防抖
+  // 创建一个防抖处理函数
-  setTimeout(() => {
+  const debouncedUpdateContent = debounce(() => {
     // 过滤 xss
     topicData.content.value = DOMPurify.sanitize(editor.getHtml())
   }, 1007)
+
+  // 调用防抖处理函数，会在延迟时间内只执行一次更新操作
+  debouncedUpdateContent()
   // 计算用户输入了多少个字符
   textCount.value = editor.getText().trim().length
 }

src/utils/debounce.ts

@@ -1,3 +1,6 @@
+/*
+ * 防抖函数，接受一个函数和一个延时时间
+ */
 export type DebouncedFunction<T extends (...args: any[]) => any> = (
   ...args: Parameters<T>
 ) => void

src/views/edit/Edit.vue

@@ -9,6 +9,9 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 import { useKUNGalgameEditStore } from '@/store/modules/edit'
 import { storeToRefs } from 'pinia'
 
+// 导入防抖函数
+import { debounce } from '@/utils/debounce'
+
 const topicData = storeToRefs(useKUNGalgameEditStore())
 
 // 话题标题的文字
@@ -34,10 +37,14 @@ const handelInput = () => {
     return
   }
 
-  // 防抖
+  // 创建一个防抖处理函数
-  setTimeout(() => {
+  const debouncedInput = debounce(() => {
+    // 过滤 xss
     topicData.title.value = topicTitle.value
-  }, 1007)
+  }, 300)
+
+  // 调用防抖处理函数，会在延迟时间内只执行一次更新操作
+  debouncedInput()
 }
 </script>