vue节流函数封装与使用

节流函数是指在一定时间内只执行一次函数，可以用于优化页面滚动、窗口大小调整等频繁触发事件的性能。下面是一个简单的 Vue 节流函数封装示例：

export default {
  data() {
    return {
      throttleTimer: null // 保存节流计时器的变量
    }
  },
  methods: {
    // 节流函数
    throttle(callback, delay) {
      clearTimeout(this.throttleTimer) // 清除上一次计时器
      this.throttleTimer = setTimeout(() => {
        callback()
      }, delay)
    },
    // 事件处理函数
    handleScroll() {
      this.throttle(() => {
        console.log('scroll event')
      }, 500)
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  }
}

在上面的示例中，我们定义了一个 `throttle` 方法，它接收一个回调函数和延迟时间作为参数，用 `setTimeout` 来实现节流功能。在 `handleScroll` 方法中，我们使用了 `throttle` 方法来包装真正的处理函数，并传入 500 毫秒的延迟时间。最后，在 `mounted` 钩子中添加了滚动事件监听器，在 `beforeDestroy` 钩子中移除监听器。

使用这个方法，我们可以轻松地实现节流功能，优化页面性能。