throttle

说明

v-throttle -- 节流指令

指定的事件触发后会触发调用，事件如果被频繁触发，那么节流函数会按照一定的频率来触发调用

基础语法：v-throttle:事件-时间.修饰符

修饰符

• stop: 阻止点击事件继续冒泡
• prevent: 阻止浏览器的默认行为
• capture: 添加事件侦听器时使用事件捕获模式
• once: 事件只会触发一次
• passive: 告诉浏览器不用去查询，我们没用preventDefault阻止默认行为

---

• firstPass: 首次立刻调用

简单使用

demo1

<template>
  <demo>
    <button class="demo-button" v-throttle:1000="click">点击获取数据</button>
    <div class="info">
      <div class="info-item">
        <div class="text">默认防抖时间</div>
        <div class="tag">300ms</div>
      </div>
      <div class="info-item">
        <div class="text">默认绑定事件</div>
        <div class="tag">click</div>
      </div>
      <div class="info-item">
        <div class="text">调用次数</div>
        <div class="tag">{{ demoData.count }}</div>
      </div>
    </div>
  </demo>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import demo from '../../global/demo.vue'

type DemoData = {
  count: number
}

const demoData = reactive<DemoData>({
  count: 0
})

const click = (e: Event) => {
  demoData.count++
}
</script>

<style lang="less" scoped></style>

首次调用

demo2

// 首次不调用
<button class="demo-button" v-throttle:1000="firstNoPassCountClick">
  点击获取数据-首次不调用
</button>


// 首次调用
<button class="demo-button" v-throttle:1000.firstPass="firstNoPassCountClick">
  点击获取数据-首次调用
</button>

事件绑定

demo3

<button class="demo-button" v-throttle:contextmenu-1000.prevent="contextmenu">
  右键点击获取数据
</button>

绑定多个事件

demo4

<button class="demo-button" v-throttle:click-contextmenu-1000.prevent="contextmenu">
  左右键点击获取数据
</button>

设置节流时间

demo5

<input
  class="demo-input"
  type="text"
  v-focus
  v-throttle:input-1000.firstPass="input"
  placeholder="输入内容查看调用次数"
/>