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

防抖函数:
/**
* [防抖函数]
* @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 。 感觉这并不是防抖呀,有没有封装过的大佬给点建议

阅读 4.8k
3 个回答
  • 你对 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
    */

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题