前言：关于防抖节流，去网上搜到的很多基本上都是JS的写法，通过一个闭包对一个变量进行控制，而JS相对来说少一点，到了Vue3 + Ts这里的项目基本舍弃了this这种逗乐的东西，所以搜到的写法很多都不管用的。

  1. 在Vue中可以使用闭包的方法实现防抖节流。
  2. 同样也可以用lodash函数库中的_.throttle() / _.debounce()实现节流防抖
  3. 亦或是使用Vue中的directive()自定义指令，这样做的好处可以随处使用（建议）

自定义指令v-throttle

  1. 首先在src目录下新建一个throttle的文件夹
  2. 新建index.ts文件
  3. 写入下面的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import type { App, Directive } from "vue";

// 导出节流函数
export default function setupThrottleDriective(app : App) {
  /** 定时器 */
  let timer : any = null

  // 节流，第二个参数就是要进行节流的时间间隔
  function throttleELfun(el : HTMLElement, throttleTime = 5000) {
    // 监听元素，捕获事件
    el.addEventListener('click', (event:Event) => {
      if (!timer) {
        timer = window.setTimeout(() => {
          timer = null
        }, throttleTime)
      } else {
        // 阻止同层级事件的冒泡
        event?.stopImmediatePropagation()
      }
    }, true)
  }

  const throttleDirective : Directive<HTMLElement> = {
    // 载入前(完成了data和el数据初始化)，执行下面的函数
    beforeMount(el, bingding) {
      throttleELfun(el, bingding.value)
    },
  }

  // 新建一个新的指令为throttle
  app.directive('throttle', throttleDirective)
}

全局导入指令

  1. 打开项目中的main.ts文件
  2. 引入函数setupThrottleDriective()
  3. 传入参数
1
2
3
4
5
6
7
8
9
import { createApp } from 'vue'
import App from './App.vue'
import setupThrottleDriective from './throttle'

import './assets/base.css'
const app = createApp(App)

setupThrottleDriective(app)
app.mount('#app')

然后即可直接在组件中使用了，使用之后会对该HTML元素进行监听，在一定的时间间隔里面多次执行，只会执行一次