Vue中如何实现 防抖 和 节流

# 前言

首先我们来简单了解下什么事 防抖 和 节流

防抖: 即短时间内大量触发同一事件，只会执行一次函数，实现原理为设置一个定时器，约定在xx毫秒后再触发事件处理，每次触发事件都会重新设置计时器，直到xx毫秒内无第二次操作，防抖常用于搜索框/滚动条的监听事件处理，如果不做防抖，每输入一个字/滚动屏幕，都会触发事件处理，造成性能浪费。

节流: 防抖是延迟执行，而节流是间隔执行，函数节流即每隔一段时间就执行一次，实现原理为设置一个定时器，约定xx毫秒后执行事件，如果时间到了，那么执行函数并重置定时器，和防抖的区别在于，防抖每次触发事件都重置定时器，而节流在定时器到时间后再清空定时器

# 防抖的实现

防抖代码
/**
* @desc 函数防抖
* @param func 目标函数
* @param wait 延迟执行毫秒数
*/
export function debounce(func, wait) {
    let timeout = null
    return function () {
        let context = this
        let args = arguments
        if (timeout) clearTimeout(timeout)
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait)
    }
}
调用防抖
import { debounce } from '../tools/debounce'
export default {
  data() {
    return {
      num: 0,
      value: ''
    };
  },
  methods: {
    inputHandle: debounce(function () {
      this.num++
    }, 500)
  }
};

# 节流的实现

节流代码
/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
*/
export function throttle(func, wait) {
    let timeout = null
    return function () {
        let context = this
        let args = arguments
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null
                func.apply(context, args)
            }, wait)
        }

    }
}
调用节流
import {  throttle } from '../tools/throttle'
export default {
  data() {
    return {
      num: 0
    };
  },
  methods: {
    clickHandle: throttle(function () {
      this.num++
    }, 1000)
  }
};