Vue手写防抖和节流函数代码详解

针对你提出的主题 “Vue手写防抖和节流函数代码详解”，我来进行详细讲解。

一、什么是防抖和节流函数

在前端开发中，很多时候会遇到一些需要节流或防抖的场景，例如在频繁进行搜索时，可以使用节流函数，减少无意义的请求；在监听窗口 resize 或滚动事件等操作时，可以使用防抖函数避免频繁执行代码。两种函数的作用如下：

• 防抖函数：多次触发事件后，函数只会执行一次，一定时间内重复触发的事件会被忽略，等到一定时间后才执行事件。
• 节流函数：在一定时间内，只执行一次事件，多次触发事件也只会执行一次，但不同于防抖函数的是，在执行了一次之后，只要间隔时间到了，就会重新触发事件，再次执行一遍事件。

二、Vue实现防抖和节流函数

下面是手写的 Vue 防抖和节流函数代码，分别包含函数调用示例：

1. Vue 防抖函数

<template>
  <input type="text" v-model="searchText" @input="inputHandler">
</template>

<script>
export default {
  data () {
    return {
      searchText: '',
    }
  },

  created () {
    this.searchHandler = debounce(this.searchHandler, 500)
  },

  methods: {
    inputHandler () {
      this.searchHandler()
    },

    searchHandler () {
      // 实现搜索逻辑的代码
      console.log('searching...')
    }
  }
}

// 防抖函数
function debounce (fn, delay) {
  let timer = null
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}
</script>

在上面的代码中，我们首先定义了一个 data，其中包含一个 searchText，表示搜索框中的值。在 created 钩子里，我们调用了 debounce 函数，并将 searchHandler 作为参数传递进去。在 inputHandler 函数中，我们则只是将 searchHandler 函数调用了一下，而真正的实现搜索逻辑的代码则在 searchHandler 函数中。

下面是节流函数的示例。

2. Vue 节流函数

<template>
  <div @scroll="scrollHandler">...</div>
</template>

<script>
export default {
  mounted () {
    this.scrollHandler = throttle(this.scrollHandler, 200)
  },

  methods: {
    scrollHandler () {
      // 模拟滚动事件的处理函数
      console.log('scrolling...')
    }
  }
}

// 节流函数
function throttle (fn, delay) {
  let timer = null
  let canRun = true
  return function (...args) {
    if (!canRun) return
    canRun = false
    timer = setTimeout(() => {
      fn.apply(this, args)
      canRun = true
    }, delay)
  }
}
</script>

在上述代码中，我们定义了一个滚动事件的处理函数 scrollHandler，并通过 throttle 函数对其进行了节流，每 200 毫秒只允许执行一次。这样，当用户在 200 毫秒内不停地滚动页面时，实际上只会执行最后一次滚动事件处理函数。

三、小结

以上就是手写 Vue 防抖和节流函数的内容了。在实际的开发中，我们经常需要对于一些频繁触发的事件进行防抖或者节流以达到优化的效果。我们可以通过手写函数，也可以使用第三方库来实现这些功能。需要注意的是，在使用这些函数时，一定要根据实际情况进行合理的时间设置，以免出现反效果的情况。