feat: debounce & thtottle (#244)

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>

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 }}详情页