From db09d1c442f2345b4a1b8f0ad93b8f5bfd3eec7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E4=B8=87?=
 <52823142+Ten-K@users.noreply.github.com>
Date: Tue, 19 Apr 2022 11:17:23 +0800
Subject: [PATCH] feat: debounce & thtottle (#244)

---
 locales/en.yaml             |  5 ++--
 locales/zh-CN.yaml          |  5 ++--
 src/router/modules/able.ts  |  9 +++++++
 src/router/modules/list.ts  |  4 +--
 src/utils/debounce/index.ts | 35 ++++++++++++++++++++++---
 src/views/able/debounce.vue | 52 +++++++++++++++++++++++++++++++++++++
 src/views/tabs/index.vue    |  6 +----
 7 files changed, 101 insertions(+), 15 deletions(-)
 create mode 100644 src/views/able/debounce.vue

diff --git a/locales/en.yaml b/locales/en.yaml
index 6ed3e5e24..4f26e37b3 100644
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -74,5 +74,6 @@ menus:
   hsAntTabs: Imitate Antdv Tabs
   hsAntAnchor: Imitate Antdv Anchor
   hsAntTreeSelect: Imitate Antdv TreeSelector
-  list: List Page
-  listCard: Card List Page
+  hsList: List Page
+  hsListCard: Card List Page
+  hsDebounce: Debounce & Throttle
diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml
index b4c0a4347..496921a6f 100644
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -74,5 +74,6 @@ menus:
   hsAntTabs: 仿antdv标签页
   hsAntAnchor: 仿antdv锚点
   hsAntTreeSelect: 仿antdv树型选择器
-  list: 列表页
-  listCard: 卡片列表页
+  hsList: 列表页
+  hsListCard: 卡片列表页
+  hsDebounce: 防抖节流
diff --git a/src/router/modules/able.ts b/src/router/modules/able.ts
index 8a9a9e75d..6ba1abdd6 100644
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@@ -92,6 +92,15 @@ const ableRouter = {
         title: $t("menus.hsAntTreeSelect"),
         i18n: true
       }
+    },
+    {
+      path: "/able/debounce",
+      name: "reDebounce",
+      component: () => import("/@/views/able/debounce.vue"),
+      meta: {
+        title: $t("menus.hsDebounce"),
+        i18n: true
+      }
     }
   ]
 };
diff --git a/src/router/modules/list.ts b/src/router/modules/list.ts
index 60e92b113..b717e2659 100644
--- a/src/router/modules/list.ts
+++ b/src/router/modules/list.ts
@@ -7,7 +7,7 @@ const ableRouter = {
   redirect: "/list/card",
   meta: {
     icon: "list-check",
-    title: $t("menus.list"),
+    title: $t("menus.hsList"),
     i18n: true,
     rank: 12
   },
@@ -18,7 +18,7 @@ const ableRouter = {
       component: () => import("/@/views/list/card/index.vue"),
       meta: {
         icon: "card",
-        title: $t("menus.listCard"),
+        title: $t("menus.hsListCard"),
         i18n: true,
         showParent: true
       }
diff --git a/src/utils/debounce/index.ts b/src/utils/debounce/index.ts
index acca614b2..f143dff98 100644
--- a/src/utils/debounce/index.ts
+++ b/src/utils/debounce/index.ts
@@ -1,12 +1,39 @@
+import { unref } from "vue";
+import type { Ref } from "vue";
+
+type FunctionArgs<Args extends any[] = any[], Return = void> = (
+  ...args: Args
+) => Return;
+
+type MaybeRef<T> = T | Ref<T>;
+
 // 延迟函数
 export const delay = (timeout: number) =>
   new Promise(resolve => setTimeout(resolve, timeout));
 
-// 防抖函数
-export const debounce = (fn: () => Fn, timeout: number) => {
+/**
+ * 防抖函数
+ * @param fn 函数
+ * @param timeout 延迟时间
+ * @param immediate 是否立即执行
+ * @returns
+ */
+export const debounce = <T extends FunctionArgs>(
+  fn: T,
+  timeout: MaybeRef<number> = 200,
+  immediate = false
+) => {
   let timmer: TimeoutHandle;
+  const wait = unref(timeout);
   return () => {
-    timmer ? clearTimeout(timmer) : null;
-    timmer = setTimeout(fn, timeout);
+    timmer && clearTimeout(timmer);
+    if (immediate) {
+      if (!timmer) {
+        fn();
+      }
+      timmer = setTimeout(() => (timmer = null), wait);
+    } else {
+      timmer = setTimeout(fn, wait);
+    }
   };
 };
diff --git a/src/views/able/debounce.vue b/src/views/able/debounce.vue
new file mode 100644
index 000000000..25767d4a0
--- /dev/null
+++ b/src/views/able/debounce.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ElMessage } from "element-plus";
+import { debounce } from "/@/utils/debounce";
+import { useDebounceFn, useThrottleFn } from "@vueuse/core";
+
+const handle = () => {
+  ElMessage({
+    message: "恭喜你，这是一条成功消息",
+    type: "success"
+  });
+};
+
+const immediateDebounce = debounce(handle, 1000, true);
+
+const debounceClick = useDebounceFn(handle, 1000);
+
+const throttleClick = useThrottleFn(handle, 1000, false);
+</script>
+
+<template>
+  <div>
+    <el-card class="mb-5">
+      <template #header>
+        <div>防抖：debounce</div>
+      </template>
+      <div class="mb-5">
+        所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n
+        秒内又触发了事件，则会重新计算函数执行时间。
+      </div>
+      <el-button @click="immediateDebounce"
+        >连续点击我，只会执行最后一次点击事件，立即执行</el-button
+      >
+      <el-button @click="debounceClick"
+        >连续点击我，只会执行最后一次点击事件，延后执行</el-button
+      >
+    </el-card>
+    <el-card>
+      <template #header>
+        <div>节流：throttle</div>
+      </template>
+      <div class="mb-5">
+        所谓节流，就是指连续触发事件但是在 n
+        秒中只执行一次函数。节流会稀释函数的执行频率。
+      </div>
+      <el-button @click="throttleClick"
+        >连续点击我，每一秒只会执行一次点击事件</el-button
+      >
+    </el-card>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/tabs/index.vue b/src/views/tabs/index.vue
index b51ddea14..d6042f077 100644
--- a/src/views/tabs/index.vue
+++ b/src/views/tabs/index.vue
@@ -55,11 +55,7 @@ function onCloseTags() {
 <template>
   <el-card>
     <template #header>
-      <div class="card-header">
-        <span class="font-medium"
-          >标签页复用，超出限制自动关闭（使用场景: 动态路由）</span
-        >
-      </div>
+      <div>标签页复用，超出限制自动关闭（使用场景: 动态路由）</div>
     </template>
     <el-button v-for="index in 6" :key="index" @click="toDetail(index)">
       打开{{ index }}详情页