2016-06-02 19 views
6

Wiem, że Vue.js ma wbudowaną funkcjonalność do debounce na polu wejściowym. Stworzyłem suwak, który uruchamia metodę, która nie używa pola wejściowego i zastanawiałem się, czy mogę skorzystać z funkcji debounce wewnątrz metody.Vue debounce a method?

Czy korzystanie z tej funkcji jest poza zakresem, po prostu dodając odbicie na wejście? Czy muszę napisać do tego moją własną funkcjonalność?

Właśnie próbował robić coś takiego, ale nie wydaje się działać:

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

Nie wygląda na to, że w vue.js jest jakaś łatwa do wywołania funkcja debounowania - wystarczy napisać jedną - to około 5 linii kodu i powinieneś być w stanie znaleźć liczne implementacje odpowiedzi na SO lub szybkie google. –

Odpowiedz

9

Dla każdego, kto zastanawia się, w jaki sposób to zrobić. Naprawiłem to za pomocą niesamowite mały fragment znalazłem:

atrybut moich danych

timer: 0 

funkcjonalność ZWLOKA

// 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); 
+1

Mężczyzna !! To było bardzo pomocne po 2 godzinach, kiedy to trafiłeś. Kocham Cię stary. – juliangonzalez

+0

Nie jestem pewien, skąd to masz, ale przeczytałem podobny fragment tutaj: https://schier.co/blog/2014/12/08/wait-for-user-to-stop-typing -using-javascript.html Być może warto byłoby dać autorowi kredyt, jeśli to było twoje źródło. – bjmc

+0

@ bjmc ma to od kogoś innego, to nie jest źródło. –

4

Jesteś umieścić this.search() Wynik wykonania w debounce, spróbuj tego:

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