函数防抖（Debounce）：指触发事件后在n秒内函数只执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。如：搜素框，滚动条
函数节流（throttle）：指连续触发事件但在n秒中只执行一次，避免某些事件频繁触发。如：按钮点击

Vue中使用防抖和节流

第一步：定义公共防抖和节流函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
export default {

  /**
   * 函数防抖
   * 触发事件后在n秒后执行，如果n秒内又触发事件，则重新计算时间
   */
  debounce(fn, wait = 1000) {
    let timer;
    return function () {
      let context = this;
      let args = arguments;
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(context, args);
      }, wait)
    }
  },

  /**
   * 函数节流
   * 触发事件立即执行，但在n秒内连续触发则不执行
   */
  throttle(fn, wait = 1000) {
    let timer;
    return function () {
      if (timer != null) return;
      let context = this;
      let args = arguments;
      fn.apply(context, args);
      timer = setTimeout(() => {
        timer = null;
      }, wait);
    }
  },
}

注意：
防抖和节流函数中return的函数不能使用箭头函数，如果使用箭头函数则this就会指向globalFunction，就会有问题

第二步：新建Vue组件

1
2
3
4
5
6
7
<template>
  <div class="wrapper">
    <div @click="btnDebounce('函数','防抖')">函数防抖</div>
    <div @click="btnThrottle('函数','节流')">函数节流</div>
  </div>
</template>

第三步：引用globalFunction并在methods中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
  import globalFunction from "../../utils/globalFunction";

  export default {
    name: "test",
    methods: {

      btnDebounce: globalFunction.debounce(function (str1, str2) {
        console.log(str1, str2);
      }, 2000),

      btnThrottle: globalFunction.throttle(function (str1, str2) {
        console.log(str1, str2);
      }, 2000),

    }
  }
</script>

说明：
globalFunction类的debounce、throttle返回的一个函数，就相当于

1
2
3
4
5
6
btnDebounce: function () {
        let context = this;
        let args = arguments;
        console.log(this);
        console.log(args);
      }

所以可以拿到当前this和arguments参数，因为argument获取的是一个类似数组的对象，所以可以通过调用函数的apply方法来传递参数


参考：传送门