Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue debounce a method?

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);
like image 222
Stephan-v Avatar asked Jun 02 '16 09:06

Stephan-v


2 Answers

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);
like image 194
Stephan-v Avatar answered Nov 20 '22 19:11

Stephan-v


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

var bufferSearch = Vue.options.filters.debounce(this.search.bind(this), 150);
bufferSearch();
like image 40
cyrilluce Avatar answered Nov 20 '22 21:11

cyrilluce