Vue中用lodash的debounce防抖来控制文本框实时搜索触发接口的频率

项目中常有这样的功能情景：

列表页里有文本框，用来模糊搜索，而文本框的触发事件，一般都是 keyup 、 input 、enter键（手机上是完成/搜索按钮） ， 除去 enter 键的事件是按一次触发一次以外 ， keyup 事件是按键松开就会触发的。

那么问题来了，不停的输入，按键按了多少次，文本框绑定的 keyup 事件就会被触发多少次，导致接口请求频率高发，这种问题在浏览器Network里就显而易见，有一水儿的同一个接口的请求都是pending状态待响应。严重的会造成服务器高压。

为了控制高频触发接口，lodash工具函数库作用就来了，它的debounce函数可以有效控制连续操作只取最后一次触发，会等连续操作停下之后再给你响应。

用法如下：

1. 进入项目根目录，用npm 安装 lodash， 用 cnpm 也行
   npm install --save lodash

2. 单个组件里这么用：

<template>
	<div class="wrap">
	   <form class="search-block" action="javascript:void 0">
		  <input type="text" v-model="txtInput" @keyup.13="tapToSearch" @input="tapToSearch" >
	   </form>
	</div>
</template>

<script>
 let lodash = require('lodash')
 export default {
    data() {
      return {
			txtInput:''
	    };
    },
	methods: {
	  // 搜索
      tapToSearch: lodash.debounce(function (event) {
        let that = this;
        event.preventDefault();
        // 调接口
        // 。。。
      }, 300)
    }
 }
</script>

以下我用 vue + mint ui 做搜索的功能，适用手机H5端，可实时输入搜索，可点击手机键盘完成/搜索按钮触发：

<template>
  <div class="wrap">
	<form class="search-block" action="javascript:void 0">
      <mt-field label="" placeholder="请输入" v-model="txtSearch" class="txt-search"
                @keyup.native.13="tapToSearch" @input.native="tapToSearch">
      </mt-field>
    </form>
  </div>
</template>

<script>
  let lodash = require('lodash')
  export default {
    data() {
      return {
		  txtSearch: ''
      };
    },
	methods: {
	  // 搜索
      tapToSearch: lodash.debounce(function (event) {
        let that = this;
        event.preventDefault();
        // 调接口
        // ...
      }, 300)
    }
  }
</script>

注意，像element ui , mint ui 这样的vue框架对input封装了一道，绑定事件要加 native 修饰符 ，否则无法触发事件。