Vue 使用 lodash Debounce 进行防抖，控制高耗任务的频率

• 安装 lodash

  # Yarn
  $ yarn add lodash
  
  # NPM
  $ npm install lodash --save
  

• 使用

  // 第一个是回调函数，第二个是防抖动的时间毫秒数，第三个是配置
  // 一般配置前两个参数即可
  _.debounce(func, [wait=0], [options={}])
  

  <template>
    <!-- 输入框 -->
    <input type="text" @input="onChange"/>
  </template>
  
  <script>
  // 导入使用
  import _ from 'lodash'
  export default {
    data () {
      return {
        // 搜索文案
        search: null
      }
    },
    methods: {
      // 定义一个防抖的函数进行请求接口
      onSearch: _.debounce(function () {
        // 请求接口
        console.log(this.search)
      }, 1000),
      // 输入变化
      onChange (e) {
        // 记录
        this.search = e.target.value
        // 调用防抖搜素函数
        this.onSearch()
      }
    }
  }
  </script>
  

• 错误的使用方式，这样使用则会变成一个普通的延迟函数，另外注意 _.debounce() 返回的是一个 函数，所以需要被调用，因此尾部有添加 () 进行调用。

  // 输入变化
  onChange (e) {
    // 定义防抖函数
    _.debounce(function () {
      // 请求接口
      console.log(e.target.value)
    }, 1000)()
  }