防抖debounce

ladash-debounce
在前端项目开发工作中，我们经常会遇到搜索查询等类似功能，用户在不断输入值时，只要按下键盘就会触发函数调用，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去请求接口，只需要在输入完成后做请求。
通常这种情况下我们怎么去解决的呢？debounce就是用来处理这种情况的。
debounce，又称防抖动函数。
定义：如果一个函数持续地触发，那么只在它结束后过一段时间只执行一次。

应用场景

举个🌰

以下情况给输入框绑定了input事件，即没有使用防抖函数，只要按下就会触发事件。在运行的时候会发现存在一个问题：这个函数的执行频率，太！高！了！

未使用防抖函数.png

使用了debounce防抖函数后可以看出， 只有在最后一次输入的1000ms（设定时间）后真正的被执行了，且只触发一次，效果如下：

使用防抖函数效果.png

节流throttle

节流和防抖，它存在的含义都是为了性能问题。
但他们还是有区别的。区别在于：防抖适合于输入事件, 等到最后一次输入才执行需要进行的操作。
节流适合于点击事件, 第一下点击就能生效, 之后指定时间段内的点击不生效。

vue中应用

本文使用的是lodash插件的内置debounce和throttle。
以debounce为例，throttle同debounce用法一致，区别在于是点击事件还是输入事件。

<input v-model="username" type="text" placeholder="请输入账号" @input="getCode"/>
<DIYButton
  text="生成费用"
  font-color="#fff"
  class="button-right"
  @click.native="handleSave"
/>

// 如未安装先安装lodash插件
npm i --save lodash
// 1. 引入
let lodash = require('lodash')
// 2. 应用
/** 
 * 输入（节流）
 */
getCode: lodash .debounce(function() {
 console.log(this.username)
},1000),

/** 
 * 生成费用（防抖）
 */
handleSave: lodash.throttle(function (data) {
  this.input = data
  this.loadRefresh()
}, 1000),  // 1000的含义是在第一次点击后的1秒内点击无效，1秒后点击可再次触发