函数节流和防抖，VueUse的妙用

前端

2023-06-06 09:58:42

优化高频事件：函数节流与函数防抖

在前端开发中，我们经常需要处理高频触发的事件，比如鼠标移动、键盘输入和滚动条滚动。对这些事件进行简单处理可能会导致性能问题，因为浏览器会频繁触发事件处理程序，从而消耗大量资源。

为了解决这个问题，我们可以使用两种技术：函数节流和函数防抖。它们都是通过限制函数的执行频率来优化代码性能的有效方法。

函数节流

函数节流是一种技术，它规定函数在指定的时间间隔内只能执行一次。这意味着，即使在时间间隔内函数被多次触发，它也只会在时间间隔结束时执行一次。

函数节流适用于需要在一段时间内持续执行的事件，比如鼠标移动或滚动条滚动。通过限制函数的执行频率，我们可以防止浏览器在事件频繁触发时消耗过多的资源。

函数防抖

函数防抖与函数节流类似，但它们之间存在一些细微的差别。函数防抖只会在最后一次触发后执行一次函数，而函数节流则会在指定的时间间隔内执行一次函数。

函数防抖适用于需要在最后一次触发后执行的事件，比如表单输入或搜索框输入。通过延迟函数的执行，我们可以防止浏览器在用户输入过程中频繁触发函数，从而提高用户体验。

函数节流与函数防抖的区别

虽然函数节流和函数防抖都是优化高频触发的事件的有效技术，但它们之间存在一些关键的区别：

函数节流会在指定的时间间隔内执行一次函数，而函数防抖只会在最后一次触发后执行一次函数。
函数节流适用于需要在一段时间内持续执行的事件，比如鼠标移动或滚动条滚动。函数防抖适用于需要在最后一次触发后执行的事件，比如表单输入或搜索框输入。

使用函数节流和函数防抖

在 Vue.js 中，我们可以使用 vue-use 库轻松实现函数节流和函数防抖。

函数节流

import { useThrottle } from 'vue-use'

const App = {
  template: `<div @click="handleClick">{{ count }}</div>`,
  data() {
    return {
      count: 0
    }
  },
  methods: {
    handleClick: useThrottle(() => {
      this.count++
    }, 1000)
  }
}

在这个示例中，handleClick 函数被节流为每秒执行一次。这意味着，即使我们连续点击按钮，count 变量也只会在每秒更新一次。

函数防抖

import { useDebounce } from 'vue-use'

const App = {
  template: `<input @input="handleInput" />`,
  data() {
    return {
      value: ''
    }
  },
  methods: {
    handleInput: useDebounce((e) => {
      this.value = e.target.value
    }, 300)
  }
}