防抖函数优化搜索框

3.1.1.防抖优化搜索框

一、在angular项目优化搜索框

（1）通过方法形式触发搜索的，可以引入lodash的debounce优化

步骤一：在index.html页面引入插件

<script src="https://cdn.bootcss.com/lodash.js/4.17.11/lodash.js"></script>

步骤二：作用的页面

<input type="text" data-ng-keyup="queryMethod()">

步骤三：在作用页面的controller里面添加防抖函数即可，如下所示：

$scope.init = function () {
        // 添加loadsh的防抖动函数
        $scope.queryMethod = _.debounce($scope.queryMethod, 500);
    };
 $scope.queryMethod = function () {...}

（2）通过监听searchValue值搜索，可以直接使用ng-model-options="{debounce: 400}"进行优化
步骤一：作用的页面

<input type="text" data-ng-model="searchValue" ng-model-options="{debounce: 400}">

步骤二：作用页面的controller

$scope.$watch('searchValue', function(newVal, oldVal) {
            $scope.searchMethod();
        });

二、在vue项目优化搜索框

步骤一：安装lodash插件（npm install lodash）

步骤二：在作用的页面

<template>
  <div>
    <input v-model="inputValue" @keydown="clickMethod">
  </div>
</template>

<script>
import { debounce } from 'lodash'
export default {
  name: 'DebounceOrThrottle',
  data () {
    return {
      inputValue: ''
    }
  },
  methods: {
    clickMethod () {
      let that = this
      that.handle()
    },
    handle () {
      console.log( '这里可以写你需要请求后台的方法')
    }
  },
  created () {
    this.clickMethod = debounce(this.clickMethod, 500)
  },
}
</script>