Vue debounce a method?

Question

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);

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
– fdomn-m, Commented Jun 2, 2016 at 9:35

Stephan-v · Accepted Answer · 2016-06-02 10:07:11Z

17

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);

answered Jun 2, 2016 at 10:07

Stephan-v

20.5k32 gold badges125 silver badges213 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

juliangonzalez Over a year ago

Man!! This was so helpful after like 2 hours dealing this $hit. Love you man.

bjmc Over a year ago

I'm not sure if this is where you got it from, but I read a similar snippet here: schier.co/blog/2014/12/08/… It might be worth giving credit to the author, if that was your source.

Stephan-v Over a year ago

@bjmc got it from a codepen of someone else, this is not the source.

Pistos Over a year ago

Would be good if you credited the source. e.g. the codepen URL

cyrilluce · Accepted Answer · 2016-06-03 08:24:26Z

4

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

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

answered Jun 3, 2016 at 8:24

cyrilluce

9859 silver badges11 bronze badges

Collectives™ on Stack Overflow

Vue debounce a method?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related