v-throttle

Function Introduction

Throttling function

Example

Number of execution: 0

Usage

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

const count = ref(0)
const onSubmit = () => {
  count.value++;
}
</script>
<tempalte>
  <div>
    <button v-once v-throttle:click-2000="onSubmit">Click on me quickly</button>
    <span>Number of execution:{{ count }}</span>
  </div>
</tempalte>

Rule

Parameter	Type	Default	Description
EventType	Event modifier	click	Event type, can be empty
Delay	Time in milliseconds	300	Event type, can be empty
HandleEvent	-	-	Processing event, required

Example: v-throttle:click-1000="handle"

eventType: click

delay: 1000

handleEvent: handle

TIP

If there is responsive data, the v-once instruction needs to be used, otherwise it will trigger multiple responsive data updates, causing DOM to re render and rendering throttling ineffective