Perché usare Signals invece di Observable per un countdown?

Signals Angular 21 hanno overhead minore di RxJS: niente subscription lifecycle, change detection automatica, zero memory leak. Per counter ad alta frequenza (1s tick o sub-second) Signals eliminano il boilerplate di takeUntil/unsubscribe e integrano nativamente con OnPush.

setInterval vs requestAnimationFrame per timer?

setInterval(fn, 1000) è deterministico per counter "human-readable" (HH:MM:SS) e risparmia CPU quando tab in background (browser clamp a 1s). requestAnimationFrame è 60fps sync con refresh rate: usalo solo se animi la UI tra tick. Questo countdown usa setInterval(1s) perché mostra secondi interi.

Come gestire drift temporale in countdown lunghi?

setInterval accumula drift (event loop non preciso a 1ms). Soluzione: confronta sempre target.getTime() - Date.now() invece di decrementare contatore locale. Formula: diff = target - now; giorni = floor(diff/86400000). Il drift resta zero anche dopo ore di esecuzione.

SSR-safe: come evito errori ReferenceError: window is not defined?

Inietta PLATFORM_ID e guard con isPlatformBrowser(platformId) prima di chiamare setInterval/setTimeout/window.* Il countdown esegue start() solo in browser; durante SSR renderizza stato iniziale senza timer. Pattern Angular Universal standard.

Come ottengo performance 60fps con OnPush?

Signal.set() notifica automaticamente il change detection anche con OnPush. No zone.js patch richieste per rAF. Se il counter deve aggiornarsi visualmente a 60fps (es. millisecondi), usa requestAnimationFrame + signal: rAF → computeCountdown(target) → signal.set(result).

Come testare un countdown con Jasmine/Jest?

Usa jasmine.clock().install() + tick(1000) per simulare avanzamento temporale. Mocka Date.now() con spyOn(Date, "now").and.returnValue(fixedMs). Pattern: component.start(); tick(1000); expect(component.countdown()).toEqual({days: 0, hours: 0, minutes: 0, seconds: 59, isPast: false}).

Countdown Timer - Signals + requestAnimationFrame 60fps

Imposta il tuo evento

Scegli la data e l'ora del tuo evento oppure usa i preset rapidi.

Preset rapidi:

Nome evento (opzionale)

Data e ora target

Come utilizzare Countdown Timer

Scegli o inserisci una data target

Seleziona una data e un orario tramite il campo datetime oppure usa uno dei preset rapidi (Capodanno, Natale) per impostare automaticamente la prossima ricorrenza.

Aggiungi un nome all'evento (opzionale)

Puoi inserire un nome descrittivo per l'evento, come "Compleanno Marco" o "Vacanze estive". Il nome appare nell'intestazione del countdown per personalizzarlo.

Avvia il countdown

Premi "Avvia Countdown" per iniziare il conto alla rovescia. Il timer si aggiornerà ogni secondo mostrando giorni, ore, minuti e secondi rimanenti.

Osserva il countdown in diretta

I quattro riquadri mostrano rispettivamente i giorni, le ore, i minuti e i secondi rimanenti. Quando il tempo scade appare un messaggio di evento trascorso.

Suggerimenti

Usa i preset rapidi per impostare subito Capodanno o Natale senza digitare manualmente la data.
Il countdown usa l'orario locale del tuo browser, quindi è preciso per il tuo fuso orario.
Lascia aperta la scheda in background: il timer continua ad aggiornarsi anche se la finestra non è in primo piano.

Domande frequenti

Quanti countdown posso creare simultaneamente?

Questa versione supporta un countdown alla volta. Per gestire più countdown, apri più schede del browser ciascuna con una data diversa.

Il countdown si azzera quando ricarico la pagina?

Sì, attualmente il countdown non viene salvato tra le sessioni. Se vuoi mantenerlo, tieni aperta la scheda del browser senza ricaricarla.

Cosa succede quando l'evento è passato?

Quando la data target è già trascorsa o raggiunge zero, il timer mostra "Evento trascorso!" con tutti i valori a zero. Puoi impostare una nuova data per ripartire.

I preset Capodanno e Natale usano quale anno?

I preset calcolano sempre la prossima occorrenza: se la data è già passata nell'anno corrente, viene impostata automaticamente l'edizione dell'anno successivo.