✨ feat: 简单封装debounce防抖函数

@@ -5,9 +5,8 @@
       <div class="video-bar">
       <div class="video-bar">
         <van-row>
         <van-row>
           <van-col span="12" @click="goTo">
           <van-col span="12" @click="goTo">
-            <van-image v-if="item.avatar" round width="2rem" height="2rem" style="vertical-align: middle;" :src="item.avatar" />&nbsp;
-            <van-image v-else round width="2rem" height="2rem" style="vertical-align: middle;" :src="icon_avatar" />&nbsp;
-            <span style="font-size: 1.05rem;vertical-align: middle;">{{ item.name }}</span>
+            <van-image round width="2rem" height="2rem" style="vertical-align: middle;" :src="item.avatar ? item.avatar : icon_avatar" />
+            <span style="font-size: 1.05rem;vertical-align: middle; display: inline-block; padding-left: 1rem;">{{ item.name }}</span>
           </van-col>
           </van-col>
           <van-col span="12">
           <van-col span="12">
             <div style="padding: 0.25rem; padding-top: 0.75rem; text-align: right;">
             <div style="padding: 0.25rem; padding-top: 0.75rem; text-align: right;">
@@ -42,11 +41,15 @@ import { useRouter } from 'vue-router'
 import 'mui-player/dist/mui-player.min.css'
 import 'mui-player/dist/mui-player.min.css'
 import MuiPlayer from 'mui-player'
 import MuiPlayer from 'mui-player'
 import { prodActionAPI, prodInfoAPI } from '@/api/C/prod.js'
 import { prodActionAPI, prodInfoAPI } from '@/api/C/prod.js'
+import { useDebounce } from '@/hooks/useDebounce.js'
 
 
 const $router = useRouter();
 const $router = useRouter();
 const props = defineProps({
 const props = defineProps({
   item: {
   item: {
     type: Object,
     type: Object,
+    default(rawProps) {
+      return rawProps
+    }
   }
   }
 })
 })
 
 
@@ -55,7 +58,7 @@ const props = defineProps({
  * 两个请求顺序执行，处理直接写在请求函数里面似乎有点问题，get请求数据似乎无法顺利渲染显示
  * 两个请求顺序执行，处理直接写在请求函数里面似乎有点问题，get请求数据似乎无法顺利渲染显示
  */
  */
 // FIXME：防抖处理
 // FIXME：防抖处理
-const handleAction = _.debounce(async (action_type, prod_id) => {
+const handleAction = useDebounce(async (action_type, prod_id) => {
   const { msg } = await prodActionAPI({ action_type, prod_id });
   const { msg } = await prodActionAPI({ action_type, prod_id });
   if (msg === `${action_type}-add-OK`) { // 动作操作成功
   if (msg === `${action_type}-add-OK`) { // 动作操作成功
     if (action_type === 'favor') {
     if (action_type === 'favor') {
@@ -70,7 +73,7 @@ const handleAction = _.debounce(async (action_type, prod_id) => {
     }
     }
   }
   }
   getProductDetail(action_type, prod_id); // 更新信息
   getProductDetail(action_type, prod_id); // 更新信息
-}, 500, { leading: true, trailing: false });
+});
 
 
 // 查询作品详情
 // 查询作品详情
 const getProductDetail = async (action_type, prod_id) => {
 const getProductDetail = async (action_type, prod_id) => {
@@ -142,7 +145,6 @@ const setComment = () => {
     color: #713610;
     color: #713610;
     padding: 1rem;
     padding: 1rem;
     padding-bottom: 0.5rem;
     padding-bottom: 0.5rem;
- 
   }
   }
 }
 }
 </style>
 </style>

+import _ from 'lodash';
+/**
+ * 封装lodash防抖
+ * @param {*} fn 执行函数
+ * @param {*} timestamp 执行间隔
+ * @param {*} options 函数配置 - 在延迟开始前调用，在延迟结束后不调用
+ * @returns 返回新的 debounced（防抖动）函数。
+ */
+export const useDebounce = (fn, timestamp = 500, options = { leading: true, trailing: false }) => {
+  return _.debounce(fn, timestamp, options);
+}