20 - 节流点击指令 (能过单元测试)

<script setup lang="ts">
import { type Directive } from 'vue'

/**
 * 实现以下自定义指令
 * 确保在一定时间内当快速点击按钮多次时只触发一次点击事件
 * 你需要支持防抖延迟时间选项, 用法如 `v-debounce-click:ms`
 *
 */

let si: NodeJS.Timeout | undefined
const VDebounceClick: Directive<HTMLButtonElement> = {
  created(el, { value, arg }) {
    el.addEventListener('click', () => {
      const timeout = Number(arg)

      if (!si) {
        value()
        si = setTimeout(() => {
          si = undefined
        }, timeout)
      }
    })
  }
}

function onClick() {
  console.log('Only triggered once when clicked many times quickly')
}
</script>
<template>
  <button v-debounce-click:200="onClick">Click on it many times quickly</button>
</template>

webfansplz / vuejs-challenges

20 - 节流点击指令 (能过单元测试) #2676