56 lines
1.7 KiB
Vue
56 lines
1.7 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { message } from "@/utils/message";
|
|||
|
|
import { debounce, throttle } from "@pureadmin/utils";
|
|||
|
|
|
|||
|
|
defineOptions({
|
|||
|
|
name: "Debounce"
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const handle = () => message("恭喜你，这是一条成功消息", { type: "success" });
|
|||
|
|
|
|||
|
|
const immediateDebounce = debounce(handle, 1000, true);
|
|||
|
|
|
|||
|
|
const debounceClick = debounce(handle, 1000);
|
|||
|
|
|
|||
|
|
const throttleClick = throttle(handle);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<el-card class="mb-5" shadow="never">
|
|||
|
|
<template #header>
|
|||
|
|
<p class="font-medium">防抖：debounce</p>
|
|||
|
|
<el-link
|
|||
|
|
class="mt-2"
|
|||
|
|
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/debounce.vue"
|
|||
|
|
target="_blank"
|
|||
|
|
>
|
|||
|
|
代码位置 src/views/able/debounce.vue
|
|||
|
|
</el-link>
|
|||
|
|
</template>
|
|||
|
|
<div class="mb-5">
|
|||
|
|
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n
|
|||
|
|
秒内又触发了事件，则会重新计算函数执行时间。
|
|||
|
|
</div>
|
|||
|
|
<el-button @click="immediateDebounce">
|
|||
|
|
连续点击我，只会执行第一次点击事件，立即执行
|
|||
|
|
</el-button>
|
|||
|
|
<el-button @click="debounceClick">
|
|||
|
|
连续点击我，只会执行最后一次点击事件，延后执行
|
|||
|
|
</el-button>
|
|||
|
|
</el-card>
|
|||
|
|
<el-card shadow="never">
|
|||
|
|
<template #header>
|
|||
|
|
<div class="font-medium">节流：throttle</div>
|
|||
|
|
</template>
|
|||
|
|
<div class="mb-5">
|
|||
|
|
所谓节流，就是指连续触发事件但是在 n
|
|||
|
|
秒中只执行一次函数。节流会稀释函数的执行频率。
|
|||
|
|
</div>
|
|||
|
|
<el-button @click="throttleClick">
|
|||
|
|
连续点击我，每一秒只会执行一次点击事件
|
|||
|
|
</el-button>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</template>
|