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

兩種方式實現的效果一模一樣