在Vue 3和TypeScript中实现登录按钮的防抖和节流，可以使用自定义指令。
防抖（Debounce）: 指在一定时间内，无论触发多少次回调函数，只在最后一次触发后执行。
节流（Throttle）: 指一定时间内只能触发一次回调函数。
以下是实现防抖和节流的自定义指令的示例代码：
import { DirectiveBinding } from 'vue';
// 防抖函数
function debounce(fn: Function, delay: number) {
let timeoutId: number | null = null;
return function (...args: any) {
if (timeoutId !== null) {
clearTimeout(timeoutId);
}
timeoutId = window.setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
// 节流函数
function throttle(fn: Function, delay: number) {
let lastCall = 0;
return function (...args: any) {
const now = new Date().getTime();
if (now - lastCall < delay) {
return;
}
lastCall = now;
fn.apply(this, args);
};
}
// 自定义指令
const vDebounce: DirectiveFunction = (el, binding) => {
const handler = debounce(() => {
binding.value();
}, binding.arg ? parseInt(binding.arg) : 1000);
el.addEventListener('click', handler);
};
const vThrottle: DirectiveFunction = (el, binding) => {
const handler = throttle(() => {
binding.value();
}, binding.arg ? parseInt(binding.arg) : 1000);
el.addEventListener('click', handler);
};
// 注册自定义指令
export default {
install(app: App) {
app.directive('debounce', vDebounce);
app.directive('throttle', vThrottle);
},
};在Vue组件中使用这些指令：
<template>
<button v-debounce="login" delay="2000">登录（防抖2秒）</button>
<button v-throttle="login" delay="2000">登录（节流2秒）</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const login = () => {
// 登录逻辑
};
return { login };
},
});
</script>在这个例子中，v-debounce 和 v-throttle 是自定义的指令，它们分别应用了防抖和节流的策略。login 是一个方法，它将包含登录逻辑。通过 delay 参数，可以指定延迟时间，单位是毫秒。