浅谈VUE防抖与节流的最佳解决方案(函数式组件)

浅谈VUE防抖与节流的最佳解决方案

什么是防抖和节流

防抖和节流是前端开发中常用的性能优化技巧，其中防抖是指防止在短时间内重复触发同一事件，而节流是指在一段时间内最多只能触发一次事件。这两种技术的应用场景主要是为了避免频繁操作引起的性能问题，比如浏览器滚动、输入框输入等。

什么是函数式组件

在Vue中，有两种组件，一种是常规的组件，另一种则是函数式组件。函数式组件是一种无状态、无实例的组件，不支持响应式原理和ref属性等，但是由于其不可变的特性，使得其对于实现防抖与节流的最佳方案来说具有一定的优势。

函数式组件实现防抖与节流

防抖的实现

防抖可以通过在组件的props参数中传入一个prop：debounce，其值为防抖的时间间隔，然后在组件的data中保存一个私有变量timeId，用于记录setTimeout的id。具体实现代码如下所示：

<template>
  <button @click="handleClick">点击防抖</button>
</template>

<script>
  export default {
    props: {
      debounce: {
        type: Number,
        default: 300
      }
    },
    data() {
      return {
        timeId: null
      }
    },
    methods: {
      handleClick() {
        if (this.timeId) {
          clearTimeout(this.timeId)
        }
        this.timeId = setTimeout(() => {
          console.log('触发防抖')
        }, this.debounce)
      }
    }
  }
</script>

在上面的代码中，当点击按钮时，就会调用handleClick方法，如果timeId不为空，则说明之前已经设置了setTimeout，需要清除之前的定时器。接着，重新设置一个定时器，在指定的时间间隔内如果没有再次点击，则触发防抖。

节流的实现

节流可以通过在组件的props参数中传入一个prop：throttle，其值为节流的时间间隔，然后在组件的data中保存一个私有变量flag，用于判断是否可以触发节流。具体实现代码如下所示：

<template>
  <button @click="handleClick">点击节流</button>
</template>

<script>
  export default {
    props: {
      throttle: {
        type: Number,
        default: 300
      }
    },
    data() {
      return {
        flag: true
      }
    },
    methods: {
      handleClick() {
        if (!this.flag) {
          return
        }
        this.flag = false
        setTimeout(() => {
          console.log('触发节流')
          this.flag = true
        }, this.throttle)
      }
    }
  }
</script>

在上面的代码中，当点击按钮时，就会调用handleClick方法，如果flag为false，则说明在指定的时间间隔内已经触发过节流，不再执行。如果flag为true，则可以执行节流，同时设置定时器，在指定的时间间隔内将flag设置为true，代表可以再次触发节流。

示例说明

以下是两条示例说明：

示例一：防止搜索框短时间内重复请求

在搜索框中输入关键词时，通常需要使用防抖技术，避免短时间内发起多次请求。可以封装一个函数式组件，通过debounce prop来控制防抖的时间间隔，具体代码如下所示：

<template>
  <input @input="handleInput" placeholder="搜索">
</template>

<script>
  export default {
    props: {
      debounce: {
        type: Number,
        default: 300
      }
    },
    data() {
      return {
        timeId: null
      }
    },
    methods: {
      handleInput(event) {
        if (this.timeId) {
          clearTimeout(this.timeId)
        }
        this.timeId = setTimeout(() => {
          console.log(`发送请求：${event.target.value}`)
        }, this.debounce)
      }
    }
  }
</script>

在上面的代码中，当输入框输入内容时，就会触发handleInput方法。如果timeId不为空，则说明之前已经设置了setTimeout，需要清除之前的定时器。接着，重新设置一个定时器，在指定的时间间隔内如果没有再次输入，则发送请求。

示例二：防止按钮被多次点击

在某些业务场景中，需要处理连续点击按钮的问题，比如在网站的交易页面中提交订单时。可以封装一个函数式组件，通过throttle prop来控制节流的时间间隔，具体代码如下所示：

<template>
  <button @click="handleClick">{{ buttonText }}</button>
</template>

<script>
  export default {
    props: {
      throttle: {
        type: Number,
        default: 3000
      },
      buttonText: {
        type: String,
        default: '提交订单'
      }
    },
    data() {
      return {
        flag: true
      }
    },
    methods: {
      handleClick() {
        if (!this.flag) {
          return
        }
        this.flag = false
        setTimeout(() => {
          console.log('提交订单')
          this.flag = true
        }, this.throttle)
      }
    }
  }
</script>

在上面的代码中，当点击按钮时，就会触发handleClick方法。如果flag为false，则说明在指定的时间间隔内已经提交过订单，不再执行。如果flag为true，则可以执行提交订单，同时设置定时器，在指定的时间间隔内将flag设置为true，代表可以再次提交订单。