1
Context: It’s the first time I’ve tried to implement a function debounce()
in Javascript and I think I’m forgetting or getting something wrong, because she is making several calls in the API, despite applying the delay
, I have the following code:
async atualizarSelecionarTodosMunicipios(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 atualizarSelecionarTodosMunicipios(value)
is called always the user clicks on a checkbox, this is working, every time I click on the checkbox this function is being called.
The problem: by clicking on the checkbox, the function atualizarSelecionarTodosMunicipios(value)
is called, after 1 second (1000ms), the call is made in the API by the function execute()
who owns the debounce
, only that by clicking several times on the checkbox, several calls are made in the API.
What was expected: when clicking several times on the checkbox, it was to make only one call in the API.
Does anyone have any idea what I’m doing wrong? Thanks!