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 毫秒内不停地滚动页面时，实际上只会执行最后一次滚动事件处理函数。