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

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