在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); } 

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