vue3项目中使用lodash库防抖节流

1.项目中使用防抖

安装：
npm i --save-dev @types/lodash

使用组件中引入：
import _ from 'lodash'

引入完成后可能会有报错，找到项目中shims-vue.d.ts文件添加就解决报错

declare module "lodash";

防抖

_.debounce(func, [wait=0], [options=]) 函数在延迟几毫秒之后才执行，也就是停止改变几秒后执行

参数：

func (Function): 要防抖动的函数。
[wait=0] (number): 需要延迟的毫秒数。
[options=] (Object): 选项对象。
[options.leading=false] (boolean): 指定在延迟开始前调用。
[options.maxWait] (number): 设置 func 允许被延迟的最大值。
[options.trailing=true] (boolean): 指定在延迟结束后调用。
 

 

   // 点击触发的函数
    const handleLogin = async () => {
      console.log("触发了");
      let { data: res }: any = await doLogin();
      console.log(res);
      proxy.userName = res.data.msg;
    };
    // 按钮请求防抖
    const fangdou = _.debounce(handleLogin, 500, {
      leading: true, // 延长开始后调用
      trailing: false, // 延长结束前调用
    });
    // 节流
    const jieliu = _.throttle(handleLogin, 2000, {
      leading: true, // 延长开始后调用
      trailing: false, // 延长结束前调用
    });