O projeto que eu estou desenvolvendo é composto de muitos formulários com diversos botões. O que eu preciso desenvolver é uma maneira de travar cliques duplos e requisições desnecessárias para a API. Por isso desenvolvi uma diretiva que coloco em todos os botões.
<dx-button mltClick text="Enviar"(onClick)="submit()"></dx-button>
A diretiva basicamente impede que duplos cliques aconteçam e execute o método submit mais vezes do que deveria.
@Directive({
selector: '[mltClick]'
})
export class MultipleClicksDirective {
lastClick = 0;
constructor() {
}
@HostListener('click', ['$event'])
clickEvent(event) {
const currentTime = new Date().getTime();
const currentClick = currentTime - this.lastClick;
if (currentClick < 400) {
event.stopImmediatePropagation();
}
this.lastClick = currentTime;
}
}
No entanto há um problema. Como podem ter percebido eu estou usando a DevExtreme e seus componentes então alguns botões são criados a partir do arquivo TS.
this.dataGrid.instance.addColumn(new ButtonsColumn().add({
onClick: (event) => this.submit(event)
}));
Então percebi que o deveria colocar o código da diretiva em uma classe com um método estático dessa forma:
export class ButtonClickUtils {
static clickEvent(event) {
const currentTime = new Date().getTime();
const currentClick = currentTime - this.lastClick;
if (currentClick < 400) {
event.stopImmediatePropagation();
}
this.lastClick = currentTime;
}
}
E chamá-lo em todo método chamado pelos eventos de click
submit = (event) => {
ButtonClickUtils.clickEvent(event);
};
a ideia era detectar múltiplos clicks e impedir antes de disparar o mesmo evento duas ou mais vezes.
1 problema: Diretiva funciona apenas em botões html
2 problema: Método estático não guarda o valor da variável this.lastClick;
3 problema: O projeto é composto por inúmeros botões e seria inviável dar manutenção em todos os formulários depois.
A solução que eu pensei foi criar um provider que detectasse todos os eventos de click disparados em um botão. Mas não sei se seria a melhor solução e nem se seria viável criar um desse tipo. Se for viável como eu criaria um provider que detecta eventos de click em botões?