1
resposta

Implementando debounce no botao de load

Boa tarde eu tentei implementar o debounce no botao que carrega parcilamente as fotos do servidor, eu tentei fazer assim:

<ap-load-button (click)="debounce.next(load())" [hasMore]="hasMore"></ap-load-button>

Mas não consegui implementar corretamente a logica no componente, entao eu usei o decorator que foi estudado no curso de typescript:

/**
 * @param milissegundos se não for informado - valor padrão 500 ms.
 */
export function debounce(milissegundos = 500) {

    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {

        const metodoOriginal = descriptor.value; 

        let timer: any = 0;

        descriptor.value = function( ...args: any[]) {

            clearInterval(timer);
            timer = setTimeout(() => { metodoOriginal.apply(this, args) }, 500);
        }
        return descriptor;
    }
}

Um detalhe, usando o typescript puro esse decorator recebia o event aqui descriptor.value = function(event: Event ...args: any[])

No angular o event vem como undefined, gostaria de saber porque?

Usando o decorator deu certo, mas como ficaria nesse caso usando o Subject do rxjs?

Desde já agradeço.

1 resposta

Fala ai José, tudo bem? Para fazer com RxJS você pode utilizar a função debounce já existente na biblioteca: https://rxjs-dev.firebaseapp.com/api/operators/debounce

O link acima tem exemplos de implementação.

Espero ter ajudado.