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
Miglioramenti nell'accessibilità con Angular CDK
Utilizzare i primary constructor di C# per inizializzare le proprietà
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Utilizzare il trigger SQL con le Azure Function
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Usare un KeyedService di default in ASP.NET Core 8
Disabilitare automaticamente un workflow di GitHub (parte 2)
Eseguire attività pianificate con Azure Container Jobs
Semplificare il deployment di siti statici con Azure Static Web App
Aggiungere interattività lato server in Blazor 8
Le novità di Angular: i miglioramenti alla CLI
I più letti di oggi
- I nuovi metodi degli array di ECMAScript 5
- Evitare (o ridurre) il repo-jacking sulle GitHub Actions
- Un custom control BoundField con dropdownlist
- .NET Core 3, C#8 and beyond
- Utilizzare long polling in HTML5 per richieste in real time
- Utilizzare le shortcut da tastiera con KeyboardAccelerator nella Universal Windows Platform
- Microsoft Security Bulletin MS05-048