如何在vue项目中的utils.js封装防抖节流函数

Question

防抖函数：

/**
* [防抖函数]
* @param {func} Function [需要执行的函数]
* @param {wait} Number [间隔时间]
* 组件内调用：this.$utils.debounce(this.aa, 1000)();
*/
debounce(func, wait) {
    let timeout;
    return function () {
      let context = this;
      let args = arguments;

      if(timeout) clearTimeout(timeout);

      timeout = setTimeout(() => {
        func.apply(context, args);
      },wait);
    };
  }

组件内调用：this.$utils.debounce(this.aa, 1000)(); 感觉有点奇怪。

打比方我现在给以下结构绑一个input事件

html

<input type="text" @input="change" >

js

  methods: {
    change() {
      this.$public.debounce(this.aa, 1000)();
    },
    aa() {
      this.bb = 5;
      console.log(this.bb);
    },
  }

执行效果并不理想， 连续输入触发input事件并不会等我完全输入完才打印出5 。 感觉这并不是防抖呀，有没有封装过的大佬给点建议

Answer 1

• 你对 debounce 的理解有问题，debounce 返回的函数，多次触发会有 debounce 功能，比如这样

  methods: {
    change() {
      this.aa();
    },
    aa:debounce(function() {
      this.bb = 5;
      console.log(this.bb);
    },1000)
  }

  你在 change 里，每次生成一个新的函数，并调用，当然会有问题；

• this.$public.debounce 这个用法也不合适，可以直接把工具函数放到 @/utils 目录里，然后需要用某个函数，就引入某个函数

  import {debounce} from '@/utils'

  这样打的包体积可能会更小更合适

• debounce 在 lodash 里有成熟实现了,不推荐自己实现
• debounce 不叫节流，节流是 throttle，两者有细微差别
• 函数注释写错了

    /**
    * @description 防抖函数
    * @param {Function} func 需要执行的函数
    * @param {Number} wait 间隔时间
    * @example 
    * 组件内调用：xxxxxxxx
    */

Answer 2

timeout确实会先延迟再执行的，你可以先执行一次再调用timeout

Answer 3

如果不是为了练手，建议用lodash处理 debounce文档