【Vue】VUE 防抖与节流

防抖原理

产生原因：当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开始延时。简单来说就是对点击事件做了一个延时处理。

防抖JS实现方法

防抖主要运用的是闭包原理，触发点击事件，调用debounce方法，传入参数为需要防抖的方法和延时时间，retrun返回一个方法，settime时间到再触发 .call(this, arges)执行方法。

	 // 防抖函数
    // 参数1：触发的方法
    // 参数2：等待时间
    function debounce(fun, time) {
      let timer
      return (arges) => {
        clearInterval(timer)
        timer = setTimeout(() => {
          // 触发该方法
          fun.call(this, arges)
        }, time)
      }
    },
    // 点击事件
    onClick() {
      let setTimeMsg = this.debounce(this.getMsg(), 500)
      setTimeMsg("参数可选，如果是axios请求，直接触发axois方法")
    },
    // 请求
    getMsg(arges) {
      getResource(1).then(response => {
      })
    },

VUE防抖组建

<template>
  <div>
    <Button :type="btn_type" @click="onClickDebounce">btn_txt</Button>
  </div>
</template>

<script>
export default {
  props: {
    // 按钮显示文字
    btn_txt: {
      type: String,
      default: ''
    },
    // 防抖时间
    debounce_timeout: {
      type: Number,
      default: 500
    },
    // 按钮type
    btn_type: {
      type: String,
      default: 'primary'
    }
  },
  methods: {
    // 防抖 闭包返回方法
    onClickDebounce() {
      let timer
      if (timer !== null) clearInterval(timer)
      timer = setTimeout(() => {
        // 触发父组建的点击事件
        this.$emit('on-click')
      }, this.debounce_timeout)
    }
  }
}
</script>

<style scoped>

</style>