vue-ts-debounce

Debounce decorator for Vue.js 2 using vue-class-component. Based on ts-debounce.

Install

1yarn add vue-ts-debounce

Usage

In the example below, increment is called at most every 500ms.

1
2<template>
3  <span>{{ value }}</span>
4</template>
5
6<script lang="ts">
7import Vue from "vue"
8import Component from "vue-class-component"
9import { Debounce } from "vue-ts-debounce"
10
11@Component
12export default class MyComponent extends Vue {
13  value = 0
14
15  @Debounce(500)
16  increment() {
17    this.value += 1
18  }
19}
20</script>

Options

The @Debounce decorator either accepts a number or an object. The number represents the wait time in ms between each call. The following options are available in the object:

Name	Description
wait	The wait time in ms.
isImmediate	If the first call should be immediate instead of waiting for the given duration.
maxWait	Call debounced function after this duration in ms, even if another call is currently in progress.

Thanks

Inspired by vue-debounce-decorator. The difference to that library is the usage of ts-debounce and the ability to use the decorator across multiple instances of the same component.