debounce防抖函数的使用（js和vue）

debounch防抖函数主要应用场景，解决按钮快速点击，多次请求的问题和input输入框多次请求的问题。接下来直接介绍在js和vue项目中的使用方式。lodash工具库地址：https://lodash.com/docs#debounce

三个参数：

_.debounce(func, [wait=0], [options={}])

options 有如下三个可选参数配置：

• leading：指定在延迟开始前是否执行 func（默认为 false）。
• maxWait：设置 func 允许被延迟的最大值。
• trailing：指定在延迟结束后是否执行 func（默认为 true）

1.在js项目中的使用

（1）引用lodash工具库：<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

（2）代码：html：<div class="ceshi">点击测试</div>

                    js：使用jq需引入jq库，否则报错

        $(".ceshi").on("click",function(){
                showAlert()
        })

        let showAlert = _.debounce(ceshiFun,400,
        {'leading': true,
        'trailing': false})
        
        function ceshiFun(){
            console.log("测试")
        }

2.在vue项目中的使用

（1）安装。进入项目文件夹，执行如下命令使用 npm 安装 lodash：npm i --save lodash

（2）引入项目：import _ from 'lodash'

（3）在项目中使用示例：

<template>
  <div id="test">
    <button @click="btnClick">点击</button>
  </div>
</template>
 
<script>
 
import _ from 'lodash';
 
export default {
  name: 'Test',
  data () {
    return {
    }
  },
  methods:{
    //按钮点击
    btnClick() {
      //显示消息
      this.showAlert('欢迎访问hangge.com');
    },
    // 显示消息时增加防抖（500毫秒延迟）
    showAlert: _.debounce(function(message){
      alert(message);
    }, 500)
  },
  // 页面创建时自动加载数据
  created() {
  }
}
</script>

就这样，美滋滋