Context: It's the first time I try to implement a debounce()
function and probably I misunderstood something, because the function it's calling my API multiple times, although the delay it's been aplied, my code:
async updateSelectAll(value) {
const execute = this.debounce(async () => {
await this.getTotalDaeMunicipio(this.filtroDaeMunicipio);
await this.gerarGraficoMunicipio();
}, 1000);
execute();
},
debounce(func, wait) {
let timer = null;
return () => {
clearTimeout(timer);
timer = setTimeout(func, wait);
};
}
The function updateSelectAll
it's called everytime the user clicks on a checkbox, this is working.
The problem: when the user clicks on the checkbox, the function updateSelectAll
it's called, after 1 second(1000ms), the API is called through the function execute()
which have the debounce
function, but when the user click multiple times on the checkbox, the API is called multiple times.
Expected behavior: when the checkobox it's clicked multiple times, was meant to do just one call to the API.