Vue 防抖 debounce

在工作中经常遇到input框输入时多次调用接口或校验，同一时间，连续多次点击按钮，频繁发送请求，导致数据频繁加载问题，本篇介绍一下如何规避这种现象。

一、了解 debounce

防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。debounce有三个参数 

1.参数讲解 

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

其中options有三个可选参数

eading：指定在延迟开始前是否执行 func（默认为 false）。

maxWait：设置 func 允许被延迟的最大值。

trailing：指定在延迟结束后是否执行 func（默认为 true）

二、debounce的使用

1.下载依赖

npm i --save lodash

lodash工具库地址https://lodash.com/docs#debounce

2.引入依赖

确保项目中已经引入jquery库，否则会报错

import _ from 'lodash'

3.在VUE中的使用

假设有一个结案按钮，每点击一次进行一次结案，已结案的项目不可再结案，在接口还未成功返回时，会存在同一时间点击多次，造成接口数据报错问题。

定义一个 closeFun()方法

<span class="btn" @click="closeFun()">
  <img src="@/assets/image/closing.png" class="tb mr-5 img">
  <span class="tb">結案</span>
</span>

在使用closeFun时，加一个_.debounce  

closeFun: _.debounce(function (){}) 这样使用是为了防止在同一页面定义多个debounce，每调用一次都会创建一个新的防抖函数，而不是在多次调用之间共享同一个防抖函数。这会导致防抖效果无法实现。

methods: {
    closeFun: _.debounce(function (msg) {
      alart(msg)
    },1000, {
      'leading': true, //在延迟开始前立即调用事件
      'trailing': false, //在延时结束后不调用,保证事件只被触发一次
    })
}

这样就ok啦