手撸Vue指令-输入框防抖v-debounce

sifu in 南昌

2020-12-30 Wednesday

Vue指令
防抖
debounce

1.设置v-debounce自定义指令

Vue.directive('debounce', {
  bind: (el, binding) => {
    let debounceTime = binding.value; // 防抖时间
    if (!debounceTime) { // 用户若不设置防抖时间，则默认2s
      debounceTime = 2000;
    }
    let cbFun;
    el.addEventListener('click', event => {
      if (!cbFun) { // 第一次执行
        cbFun = setTimeout(() => {
          cbFun = null;
        }, debounceTime);
      } else {
        event && event.stopImmediatePropagation();
      }
    }, true);
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.使用

<button @click="sayHello" v-debounce>提交</button>

或者设置节流时间为`1s`

<button @click="sayHello" v-debounce="1000">提交</button>

1
2
3
4
5