I know Vue.js has functionality built in to debounce on an input field. I have created a slider that fires a method that does not use an input field though, and I was wondering if I can take advantage of the debounce functionality inside of a method.

Is it even possible to use this functionality outside of simply adding a debounce to an input? Or do I need to write my own functionality for this?

I've just tried doing something like this but it does not seem to work:

this.$options.filters.debounce(this.search(), 2000);

I know Vue.js has functionality built in to debounce on an input field. I have created a slider that fires a method that does not use an input field though, and I was wondering if I can take advantage of the debounce functionality inside of a method.

Is it even possible to use this functionality outside of simply adding a debounce to an input? Or do I need to write my own functionality for this?

I've just tried doing something like this but it does not seem to work:

this.$options.filters.debounce(this.search(), 2000);

• javascript
• jquery
• vue.js
• vue-component

• 2 Doesn't look like there's any easy-to-call debounce function in vue.js - just write one - it's about 5 lines of code and you should be able to find numerous implementations on SO answers or a quick google. – fdomn-m Commented Jun 2, 2016 at 9:35

2 Answers 2

For anyone who is wondering on how to do this. I fixed this by using an awesome little snippet I found:

Attribute in my data

timer: 0

Debounce functionality

// clears the timer on a call so there is always x seconds in between calls
clearTimeout(this.timer);

// if the timer resets before it hits 150ms it will not run 
this.timer = setTimeout(function(){
    this.search()
}.bind(this), 150);

You are put this.search() execution result into debounce, try this:

var bufferSearch = Vue.options.filters.debounce(this.search.bind(this), 150);
bufferSearch();