vue3+ts登入按钮防抖和节流

在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 参数，可以指定延迟时间，单位是毫秒。