Unclear documentation for the use of the debounce function

[thdepauw]

I have a custom Input component where I needed to add debounce using the function (below code redacted).

My base example looks like this:

<template>
  <div class="my-input">
    <label>My Label</label>
    <div class="my-input__control">
      <input
        @input="triggerOnInputChanged($event.target.value)"
      />      
      <button
        type="submit"
      >
        <span class="btn__icon icon-my-chevron"></span>
      </button>
    </div>
    <span class="text-error"> Some Error</span>
  </div>
</template>

<script>
import { debounce } from 'vue-debounce';

export default {
  name: 'MyInput', 
  props: {
    ...
  },  
  methods: {
    triggerOnInputChanged(value) {
      debounce(() => console.log('triggered change:',value), 300);
    }
  }
};
</script>

Using just debounce as noted in the documentation doesn't seem to trigger the console log.
After having a look at the source code of the directive I noticed that debounce returns the function trigger and a way to cancel it.
Using the following code worked:

<template>
  <div class="my-input">
    <label>My Label</label>
    <div class="my-input__control">
      <input
        @input="triggerOnInputChanged($event.target.value)"
      />      
      <button
        type="submit"
      >
        <span class="btn__icon icon-my-chevron"></span>
      </button>
    </div>
    <span class="text-error"> Some Error</span>
  </div>
</template>

<script>
import { debounce } from 'vue-debounce';

export default {
  name: 'MyInput', 
  props: {
    ...
  },
  data() {
    return {
      debounceFn: undefined
    };
  },  
  methods: {
    triggerOnInputChanged(value) {
      if (this.debounceFn) {
        this.debounceFn.cancel();
      }

      this.debounceFn = debounce(() => this.$emit('on-input-value-changed', value), 300);
      this.debounceFn();
    }
  }
};
</script>

I see that #17 also had some issue using the bare debounce function.

Am I missing something or using the debounce function incorrectly?
Or is the documentation missing a part to make the usage more clearly?

[dhershman1]

No you're correct, the documentation is incorrect and needs to be adjusted, thank you for pointing that out.

[dhershman1]

Fixed! v2.5.3 released

[thebrownfox]

@dhershman1 the documentation is still very confusing in regards of using only the function. Ineth's example shows the actual usage with cancellation of the unnecessary calls. I was just wondering why the directive worked and how to make it work without it.

Usage with async/await

debouncedApiCall(param) {
     if (this.dataCheck) {
        if (this.debounceFn) {
            this.debounceFn.cancel();
        }
        this.debounceFn = this.$helpers.debounce(
            async () =>
                (this.asyncData = await this.getAsyncData(
                    param
                )),
            2000
        );
        this.debounceFn();
    }
},

[dhershman1]

@thefoxie I'm sorry, I'm not 100% sure I follow, using the debounce function itself you should just require in debounce from the lib and call that function as is.

[thebrownfox]

@dhershman1 the docs don't mention usage and cancellation. The code I provided is just example of using it with async function. This is usefull when you want to call something and turn on loader in UI even before the timeout because the loader would be turned on (function called) just after the timeout if used with directive.

My usecase: Check email availability

type -> check if it's valid email -> turn the loader on -> debounced api call -> turn off the loader

With directive it behaves like this
type -> wait/debounce for given time -> check if it's valid email -> turn the loader on -> api call -> turn off the loader

I need to tell what part of the called function should be debounced. Or another workaround is to create 2 separate functions - one that is called via v-debounce directive and the other one on input. Doesn't make much sense though since they share logic that checks the validity of email.

[tbredin]

Thanks for this library. Just wanna share that some of the above code, in particular including a full example showing an example implementation using this.debounceFn.cancel(); might have saved me a couple of hours of confusion this afternoon if there was a more complete example of its usage in the docs! Would def be a handy addition.

[dhershman1]

I think I totally forgot based on past comments, if you wanna open a new ticket for that it'd be cool. That way as I get carried away with work I won't forget to come back to it.