js防抖和节流

1.防抖和节流的区别

防抖：在n秒内，多次触发，只执行最后一次

节流：事件多次触发，每间隔n秒执行一次

定时器方式实现防抖和节流时区别：（清除定时器时机不同）

• 防抖是如果定时器存在，则清除当前定时器并重新设置定时器，否则执行函数；
• 节流是如果定时器不存在时，则设置定时器，并且在定时器内部调用timer=null保证定时器只触发一次

注意如果函数有参数，是在返回函数中获取上下文this和参数，并通过fn.apply(context,args) 方式进行传递

2.防抖：

3.节流：

4.vue项目中使用防抖和节流函数

先在data中调用debounce函数并返回，再直接进行调用

data() {
    const onDebounce = this.debounce(this.onSubmit, 500, true)
    return {
      onDebounce
    };
},
methods: {
    onSubmit() {
      console.log("submit!");
    },
    debounce(func, wait = 500, immediate) {
      let timer;
      return function () {
        let context = this;
        let arg = arguments;
        if (immediate) {
          func.apply(context, arg);
          immediate = false;
          return;
        }

        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(context, arg);
        }, wait);
      };
    },
  },

 立即创建