vue-debounce

A simple to use directive for debounce solutions

It attaches itself to an event for actions

Features

• Dynamic debouncing for input based requests
• Easy to use, just place it into your vue instance and attach it to your inputs/components
• Self regulating no need to worry about it, set it and forget it
• Multiple time formats supported (miliseconds and seconds)
• Enter key support automatically fire the desired function when the user hits the enter key in the desired input (Can also be disabled)

Modifiers

• lock : Used to lock the debounce and prevent the enter key from triggering the function when pressed
  • Example: v-debounce:400ms.lock="cb"
• unlock : Used to unlock the enter key on a debounced input, useful if you want to use the lock option and only want a few debounced inputs unlocked

Options

• lock : Boolean : Default: false - This works the same way as the modifier does, however using the option will lock ALL of the debounced inputs within that vue instance, where as using the modifer only locks the one it's attached to
• listenTo : String : Default: onkeyup - Allows you to set a custom event attached to an element like oninput for example
  • It's important to not that these are GLobal Event Handlers directly attached to the HTML element: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers

Usage

First make sure we tell vue to use it

import Vue from 'vue'
import vueDebounce from 'vue-debounce'

Vue.use(vueDebounce)

// Or if you want to pass in the lock option
Vue.use(vueDebounce, {
  lock: true
})

// Setting a different event to listen to
Vue.use(vueDebounce, {
  listenTo: 'oninput'
})

Then attach a time:format to the directive, and set the value to the function you want to call and attach it to your input element

Example:

<input v-debounce:300ms="myFunc" type="text" />

If no wait timer is passed in, then the directive will default to 300ms.

You can pass the time in multiple formats:

<!-- If no time format is attached ms is used -->
<input v-debounce:300="myFunc" type="text" />

<!-- Seconds format is supported -->
<input v-debounce:1s="myFunc" type="text" />

<!-- Using Modifiers locking the input so the enter key isn't registered -->
<input v-debounce:1s.lock="myFunc" type="text" />

<!-- Using Modifiers unlocking the input so the enter key is registered -->
<!-- If you've set lock to true as an option when adding this module -->
<input v-debounce:1s.unlock="myFunc" type="text" />

The value of the input is passed along to your function

A full example:

<template>
  <input v-debounce:400ms="myFn" type="text" />
</template>
<script>
export default {
  methods: {
    myFn(val) {
      console.log(val) // => The value of the input
    }
  }
}
</script>