Vue中使用lodash实现防抖和节流

Lodash是一个一致性、模块化、高性能的JavaScrip 实用工具库。可以很轻松地实现防抖和节流。

1.安装

npm i --save lodash

2.Lodash CDN配置

以vue项目为例，首先在public/index.html中添加CND资源。

<head>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/lodash.js/4.17.21/lodash.min.js"></script>
...
</head>

在vue.config.js添加配置。

const cdn = {
    js: [
        ...
        "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/lodash.js/4.17.21/lodash.min.js"
    ]
};

module.exports = defineConfig({
    //webpack配置
    configureWebpack: {
        //忽略将这些加入打包
        externals: {
            vue: 'Vue',
            'vue-router': 'VueRouter',
            vuex: 'Vuex',
            'element-ui': 'ELEMENT',
            axios: 'axios',
            lodash: '_'
        },
    }

})

3.Lodash实现防抖

以模拟发送手机验证码为例。

<template>
   <div>
      <el-tab-pane label="用户注册" name="userreg">
          <el-form ref="form" label-width="100px">
            <el-form-item label="用户名">
              <el-input v-model="regUser.identify" placeholder="请输入注册手机/邮箱"></el-input>
            </el-form-item>
            <el-form-item label="">

              <el-button @click="sendMsgToMobileOrEmail" :disabled="sendMsgDisabled">{{ sendMsgBtnTitle }}</el-button>

            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="regUser.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input v-model="regUser.confirmpass" placeholder="请输入确认密码" show-password></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input v-model="regUser.validateCode" placeholder="请输入验证码"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-button style="width: 80%; display: block" type="success" @click="doReg" plain>注册
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
   </div>
</template>
<script>
  export default {

    name: "MyLoginForm",
    data() {
       return{
            sendMsgDisabled: false,
            sendMsgBtnTitle: '发送验证码',
       }
    },
    methods:{
       //防抖实现发送手机验证码，保证一秒内只允许成功发送一次
       sendMsgToMobileOrEmail:_.debounce(function(){
       //具体方法
       this.$message.success('发送验证码成功！');
       this.sendMsgDisabled = true;
       setTimeout(()=>{this.sendMsgDisabled=false},60000);
       let iCount=60;
       let timer = setInterval(()=>{
         this.sendMsgBtnTitle='发送验证码('+(--iCount)+')';
         //清除定时器
         if(iCount<=0){
           clearInterval(timer);
           this.sendMsgBtnTitle='发送验证码'
         }
       },1000);

      },1000),
    }
  }
</script>

运行效果：