lodash库_.debounce防抖动方法的正确写法

Vue项目中使用:

错误的写法一:
这样写不能执行传入的需要防抖动的func函数,没有被执行。

//在js文件中抽取的方法:
const pressDebounce = (func) => {
  return _.debounce(func, 2000, { leading: true, trailing: false, maxWait: 3000 })
}

//html元素中使用:
 <div class="button-div">
        <button @click="pressDebounce(goToOrderList)">获取订单</button>
      </div>

错误的写法二:
这样写点击多少次还是会执行多少次,且在2秒后被执行。

//vue的method方法中定义
  methods: {
    clickSearchBtnToFetch() {
      this.serverData = testColums;
      let that = this;
      let url = "/fetch/merchant/list";
      _.debounce(function() {
        that.getDataList(url);
      }, 2000)();
    },


//元素中使用:

<div class="button-div">
      <button @click="clickSearchBtnToFetch">关键字搜索</button>
 </div>

正确的写法:

//抽取了公共js方法:
const pressDebounce = _.debounce(
  (func) => {
    func()   //在以下例子中表示 goToOrderList
  },
  2000,
  { leading: true, trailing: false, maxWait: 3000 }
)


//引入方法,在元素中使用:
 <div class="button-div">
      <button @click="pressDebounce(goToOrderList)">查看订单</button>
  </div>

你可能感兴趣的:(lodash库_.debounce防抖动方法的正确写法)