Utilizing the debounce function to create a real-time search feature.
Researching more on debouncing from https://css-tricks.com/debouncing-throttling-explained-examples/, it seems like the function should control the number of calls made.
In my scenario, the function requests are delayed and then executed collectively once the waiting period is over:
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 structure (Vue.JS):
<input
type="text"
v-model="searchString"
class="form-control input-lg"
placeholder="search movie"
@keydown="searchOnType(currentPage, searchString)"
>
This is the output in my console.log: