How to use debouncing function inside watcher?

[skunkworker]

Right now I have a text entry box that I want to debounce, but when the text input is blank I want it to be sent instantly.

methods: {
      sendSearchValue () {
        this.$emit('input', this.search_text)
      }
    },
watch: {
      search_text (newVal) {
        if (newVal.length == 0) {
          this.$emit('input', '')
        } else {
          let vm = this
          console.log(`search_text ${newVal}, debouncing`)
          debounce(() => vm.sendSearchValue(), '400ms')
        }
      }
    },

<input type="text" 
v-model="search_text" 
ref="user_search"  
id="omnibar-search-field" 
v-on:keyup.enter="sendSearchValue"
/>

On my element I have it working just fine if I add v-debounce:300="sendSearchValue", but I feel like I am using the custom debounce function incorrectly. Is there something that I am missing?

[dhershman1]

To my knowledge the watcher should trigger anytime the search_text value is changed, should you be emitting another input even from the watcher?

If you want to expand with a little more detail that would be helpful too as I don't think I'm connecting the dots on my end to what your shooting for!

[skunkworker]

No worries, so I have a search input which uses a real time search api, in order to cut down on how many queries I'm running I am using this library so that after someone stops typing then the request is fired. I ran into the use-case where if someone clears the input, the event won't be fired immediately but after the same 300ms waiting time and I would prefer that $emit('input,'') to be fired without the waiting time.

So I first tried to implement just the debounce operation by using the debounce(() => vm.sendSearchValue(), '400ms') function but oddly that function never ended up firing and I am unsure as to why.

[dhershman1]

OHH okay I see what you mean! In it's current state, I don't think you would be able to achieve that but I could add an option for a new boolean... Something like fireOnEmpty or whatever that would enable functionality like that.

Would that be something you'd be interested in using for what you need?

[skunkworker]

That could be very helpful, or something like a conditional that would only debounce if a value was true, otherwise it would fire immediately.

[dhershman1]

Alright in v2.3.0 there is a new option added in called fireOnEmpty if this is set to true then the debounced function will fire immediately if the input is empty. You can see it in the README!

[skunkworker]

Thanks @dhershman1

[ghost]

So I first tried to implement just the debounce operation by using the debounce(() => vm.sendSearchValue(), '400ms') function but oddly that function never ended up firing and I am unsure as to why.

Interestingly, I am seeing the same issue that @skunkworker touched on here. I too have a debounced function within a watcher:

        watch: {
            unit(newVal) {
                console.log('********');
                debounce(() => console.log(newVal), '2000ms');
            }
        }

and while the callback is definitely being called, the debounced console.log never is. I'm not getting any errors or any clue as to why it's not working, can you think of any reason?

Thanks 👍

[dhershman1]

It's because debounce returns a debounced function

So debounce(() => console.log(newVal), '2000ms')()

Or setup your debounces ahead of time

const dFn = debounce(console.log, '2000ms')

export default {
  watch: {
    unit (newVal) {
      console.log('*****')
      dFn(newVal)
    }
  }
}

[ghost]

Arghhh, of course! Man, how embarrassing! Thanks for that, sorry for wasting your time. Really great package, thanks a lot for your work :)

[dhershman1]

Not a waste of time, at first I had commented thinking it was also an issue but then I looked into the function and remembered lol.

Thanks for using it!