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)()
}