I am looking to enhance my search functionality by implementing a debounce method that would pause the search action after each keystroke for 1 second. However, even after implementing it, the search still occurs with every keystroke instead of waiting for the specified delay. What can I do differently?
Template:
<v-data-table
:pagination.sync="pagination"
:rows-per-page-items="[10, 25, 50, 100, 200, 250, 500]"
:headers="headers"
:items="rows"
select-all
:search="search"
:custom-filter="_debounce(searchFilter, 1000)"
v-model="selected"
>
Function in vue file's script:
_debounce(fn: Function, delay: number) {
debounce(fn, delay)
},
The core function (found in custom library):
export const debounce = function (fn: Function, delay: number) {
var timeoutID: any = null
return function () {
clearTimeout(timeoutID)
timeoutID = setTimeout(function () {
fn()
}, delay)
}
}