Debounced function calls delayed but all executed when wait timer ends

Question

I am using debounce in order to implement a 'search as you type' field.

I am reading https://css-tricks.com/debouncing-throttling-explained-examples/ and from what I can understand the function should only be called a limited number of times.

In my case, the function calls are delayed, but executed all at once once the wait timer ends:

methods: {
  searchOnType: function (currentPage, searchString) {
    console.log(`Searching ${searchString}`)
    var debounced = throttle(this.getMovies, 4000, {leading: false, trailing: true})
    debounced('movies.json', currentPage, searchString)
  },
  getMovies: function (url, page, query) {
    console.log(query)
    this.loading = true
    resourceService.getMovies(url, page, query).then((result) => {
      this.items = result.movies
      this.totalMovies = result.total
      this.loading = false
    })
  },

the HTML (it's Vue.JS)

  <input 
    type="text" 
    v-model="searchString" 
    class="form-control input-lg" 
    placeholder="search movie" 
    @keydown="searchOnType(currentPage, searchString)"
  >

This is my console.log:

Bill Criswell · Answer 1 · 2016-10-31T22:47:19.073

2

You're creating a throttled function every time you keydown (you should probably be using input instead by the way). You can do this instead I think...

methods: {
  searchOnType: throttle((currentPage, searchString) => {
    this.getMovies('movies.json', currentPage, searchString)
  }, 1000, {leading: false, trailing: true})
}

edited Oct 31 '16 at 22:47

answered Oct 31 '16 at 22:02

Bill Criswell

32,161
7
75
66

Yes you can, I just read it in the docs http://vuejs.org/guide/migration.html#debounce-Param-Attribute-for-v-model-removed .. thanks ! but your syntax is a bit wrong, can you check the doc and rectify so I can √ ? – George Katsanos Oct 31 '16 at 22:11
The syntax is fine though. It all depends how you want to handle it. I'll updated my example to handle the arguments. – Bill Criswell Oct 31 '16 at 22:45
So what was happening with what I was doing before? – George Katsanos Oct 31 '16 at 22:57
You were creating a bunch of different `debounced` functions. – Bill Criswell Nov 01 '16 at 00:51

Debounced function calls delayed but all executed when wait timer ends

1 Answers1