在vue中使用lodash的debounce(防抖函数)

在vue中使用lodash的debounce(防抖函数)

回不去的那些时光关注

0.0792020.01.21 23:51:56字数 39阅读 2,472

• 1、下载lodash

npm install lodash --save

• 2、引入debounce防抖函数

import debounce from "lodash/debounce"; // 防抖函数

• 3、使用

方式一：

// template  我这里用了ant-design-vue的input组件
<a-input @change="inputChange" />

// methods方法
inputChange: debounce(function(e) {
  console.log(e.target.value);
}, 500)

方式二：

// template  我这里用了ant-design-vue的input组件
<a-input @change="inputChange" />

// 生命周期钩子函数 created
created() {
    this.inputChange = debounce(this.inputChange, 500)
},
// methods方法
inputChange(e) {
  console.log(e.target.value);
}

两种方式实现的效果一模一样