Vue 防抖函数-实现登录按钮防抖

Vue 防抖函数-实现登录按钮防抖

1.自定义防抖函数 (在utils/debounce.ts中定义):

/**
 * 防抖函数，防止函数在短时间内被频繁调用
 * @param func 需要防抖的函数
 * @param wait 等待时间，默认为500毫秒
 * @returns 返回一个新的函数，该函数在调用时会等待指定的时间后再执行原函数，如果在这段时间内再次调用，则取消之前的执行并重新计时
 */
export function debounce(func: Function, wait = 500) {
    // 定义一个变量用于存储定时器的ID
    let timeoutId: number | null = null;
    // 返回一个函数，用于调用原函数并添加防抖逻辑
    return (...args: any[]) => {
      // 如果定时器ID存在
      if (timeoutId) {
        // 清除之前的定时器
        clearTimeout(timeoutId);
      }
      // 设置一个新的定时器，等待wait毫秒后执行原函数，并将this和args传递给原函数
      timeoutId = setTimeout(() => {
        func.apply(this, args);
        // 执行完原函数后，将定时器ID置为null
        timeoutId = null;
      }, wait);
    };
  }

调用时：

const debouncedLogin = debounce(async () => {
  await login();
}, 500); 

2.使用lodash.debounce库来实现防抖功能。
npm install lodash.debounce
或者使用yarn
yarn add lodash.debounce

import _debounce from 'lodash.debounce'; // 引入lodash.debounce
// 使用lodash.debounce创建防抖版本的login方法
const debouncedLogin = _debounce(async () => {
  await login();
}, 500);
/ 将login方法的调用替换为debouncedLogin
const login = async () => {
  // ...login逻辑保持不变...
};

// 修改登录按钮的点击事件处理器
<el-button duration="10" :plain="true" @click="debouncedLogin()">登录</el-button>