RxJS è una delle librerie più importanti, nel mondo JavaScript/TypeScript. Questa libreria consente di gestire flussi di informazioni, o eventi, attraverso una programmazione funzionale. Oltre a sottoscriversi ad azioni proveniennti da un contesto JavaScript, è possibile anche restare in ascolto di feedback provenienti dal DOM come vedremo in questo script dove tratteremo l'evento visibilitychange che viene invocato quando il tab dell'applicazione non è più visibile. La sua gestione ci può tornare utilissima in contesti in cui volessimo interromepere un sistema di polling scandito da un timer o più semplicemente effettuare delle operazioni nel momento in cui il tab tornasse visibile per aggiornare i dati presentati in pagina.
Per creare un'observable che esponga informazioni sulla visibilità del tab è sufficiente utilizzare il metodo fromEvent.
import { of, fromEvent, concat } from 'rxjs'; import { map } from 'rxjs/operators'; function visibleChanges(document: Document): Observable<boolean> { const visibilityChanges = fromEvent(document, 'visibilitychange'); return concat(of(null), visibilityChanges).pipe( map(() => !document.hidden) ); }
La concatenazione con of(null) è necessaria in quanto l'observable inizierà a produrre eventi istantaneamente, in caso omettessimo il concat, il primo evento emesso avverrà solo quando cambieremo tab.
Grazie a quest'observable, possiamo aggiornare i dati nella pagina nel momento in cui viene caricata o il tab viene riattivato.
visibleChanges(document).pipe( filter(x=>x) //.switchMap() //.map() //.tap() ).subscribe();
Come detto sopra, possiamo anche fermare un polling quando il tab non è visibile.
combineLatest([timer(0, 1000),visibleChanges(document)]).pipe( filter(([_,x])=>x), tap(([timer,_])=>console.log(timer)) ).subscribe();
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire query verso tipi non mappati in Entity Framework Core
Verificare la provenienza di un commit tramite le GitHub Actions
Ottimizzazione dei block template in Angular 17
Limitare le richieste lato server con l'interactive routing di Blazor 8
Utilizzare un numero per gestire la concorrenza ottimistica con SQL Server ed Entity Framework
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Evitare il flickering dei componenti nel prerender di Blazor 8
Load test di ASP.NET Core con k6
Supportare lo HierarchyID di Sql Server in Entity Framework 8
Utilizzare un service principal per accedere a Azure Container Registry
Creare un'applicazione React e configurare Tailwind CSS
Cambiare la chiave di partizionamento di Azure Cosmos DB