buttonThrottle

chat-list.vue

@@ -68,9 +68,10 @@
 </template>
 
 <script lang="ts">
-// import buttonThrottle from "@/utils/button-throttle";
 import { Component, Prop, Vue } from "vue-property-decorator";
 
+import buttonThrottle from "../utils/button-throttle";
+
 import { chatStore, ChatStore } from "@/customer-service/store/model";
 // import { popupService } from "@/views/common-module/component/element-upgrades/fast-service-popup";
 import { formatTime, TimeFormatRule } from "@/customer-service/utils/time";
@@ -166,7 +167,7 @@ export default class ChatList extends Vue {
     });
   }
 
-  //   @buttonThrottle()
+    @buttonThrottle()
   private async search() {
     this.searchKeyword = this.searchKeyword.trim();
     if (!this.searchKeyword) {

utils/button-throttle.ts

+function changeCursor(btn: EventTarget | null) {
+    if (btn == null) {
+        return () => null;
+    }
+    const btnHTMLElement = btn as HTMLElement;
+    const oldCursor = btnHTMLElement.style.cursor;
+    btnHTMLElement.style.cursor = "wait";
+    return () => {
+        btnHTMLElement.style.cursor = oldCursor;
+    };
+}
+
+/*
+ * 请保证被包装的方法的参数列表最后一个是点击事件的参数
+ */
+export default function buttonThrottle() {
+    let pending = false;
+    return function (target: any, name: string): any {
+        const btnClickFunc = target[name];
+        const newFunc = async function (this: Vue, ...params: any[]) {
+            if (pending) {
+                return;
+            }
+            const event: Event = params[params.length - 1];
+            const btn = event?.target;
+            pending = true;
+            const recoverCursor = changeCursor(btn);
+            try {
+                await btnClickFunc.apply(this, params);
+            } catch (error) {
+                // eslint-disable-next-line no-console
+                console.error(error);
+            }
+            recoverCursor();
+            pending = false;
+        };
+        target[name] = newFunc;
+        return target;
+    };
+}