vue项目中的防抖和节流实现方法

防抖和节流的区别

防抖(debounce)

防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。
触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

节流(throttle)

节流是指一定时间内代码只执行一次。
高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

总结 (简要答案)

防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout。防抖可以比作等电梯，只要有一个人进来，就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。
节流：控制流量，单位时间内事件只能触发一次，与服务器端的限流 (Rate Limit) 类似。代码实现重在开锁关锁 timer=timeout; timer=null。节流可以比作过红绿灯，每等一个红灯时间就可以过一批。

防抖

防抖分为两种:
1、立即执行：频繁触发事件，第一次触发时执行函数，后面触发不会执行，停止触发，间隔一定时间之后再触发事件，函数才会再次执行。

// 防抖处理-立即执行
const on = Vue.prototype.$on
Vue.prototype.$on = function (event, func) {
  let timer;
  let flag = true;
  let newFunc = func
  if (event == 'click') {
    newFunc = function () {
      if(flag) {
        func.apply(this, arguments)
        flag = false
      }
      clearTimeout(timer)
      timer = setTimeout(function () {
        flag = true
      }, 500)
    }
  }
  on.call(this, event, newFunc)
}

2、后执行：频繁触发事件，事件只会在触发事件之后间隔定义的时间，函数才会被执行，而且只会执行最后一次触发的事件。

// 防抖处理 -- 最后执行
const on = Vue.prototype.$on
Vue.prototype.$on = function (event, func) {
  let timer
  let newFunc = func
  if (event === 'click') {
    newFunc = function () {
      clearTimeout(timer)
      timer = setTimeout(function () {
        func.apply(this, arguments)
      }, 500)
    }
  }
  on.call(this, event, newFunc)
}

节流

定义：事件触发后，会先执行一次事件函数，执行之后如果在规定时间间隔内再触发事件，将不触发函数，超过规定的事件间隔后会再次触发一次，如此往复。
在vue中对click添加节流处理

// 节流
const on = Vue.prototype.$on

Vue.prototype.$on = function (event, func) {
  let previous = 0
  let newFunc = func
  if (event === 'click') {
    newFunc = function () {
      const now = new Date().getTime()
      if (previous + 1000 <= now) {
        func.apply(this, arguments)
        previous = now
      }
    }
  }
  on.call(this, event, newFunc)
}

使用方式：选择一种，将代码复制粘贴在main.js即可。