0Pricing
JavaScript Academy · Lezione

setTimeout, setInterval e deriva dei timer

Pianifichi attività singole e ripetute con setTimeout/setInterval e impari una tecnica semplice per ridurre la deriva dei timer.

setTimeout, setInterval e deriva dei timer è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 3 lezioni in totale.

Introduzione ai timer

Obiettivo: pianificare il lavoro in modo ordinato.

  • setTimeout: esegue in seguito (una volta)
  • setInterval: esegue ripetutamente
  • Drift: perché i timer perdono precisione
  • Semplice correzione del drift
setTimeout, setInterval e deriva dei timer — illustrazione 1

setTimeout — una tantum

setTimeout(fn, ms) esegue una sola volta dopo il ritardo (temporizzazione minima, non esatta).

// setTimeout schedules a one-off callback
console.log("A: start");

setTimeout(function () {
  console.log("B: after ~5ms");
}, 5);

console.log("C: scheduled");
setTimeout, setInterval e deriva dei timer — illustrazione 2

setInterval — ripetizione

setInterval si ripete automaticamente; utilizzi clearInterval(id) per interromperlo.

// setInterval repeats; always clear it
let count = 0;

const id = setInterval(function () {
  count = count + 1;
  console.log("tick", count);

  // Stop after 3 ticks to avoid endless logs
  if (count >= 3) {
    clearInterval(id);
    console.log("stopped");
  }
}, 5);
setTimeout, setInterval e deriva dei timer — illustrazione 3

Osservare il drift

Gli intervalli reali variano: il lavoro in esecuzione, il carico del dispositivo e l'event loop causano il drift.

// Drift demo: expected vs actual timing
const targetMs = 5;
let last = Date.now();
let times = 0;

const driftId = setInterval(function () {
  const now = Date.now();
  const gap = now - last; // actual gap
  last = now;
  times = times + 1;
  console.log("gap~", gap, "ms");

  if (times >= 3) {
    clearInterval(driftId);
    console.log("done");
  }
}, targetMs);
setTimeout, setInterval e deriva dei timer — illustrazione 4

Pianificazione allineata

Si allinei a un orario expected in evoluzione: calcoli il ritardo successivo a partire da esso per evitare che l'errore si accumuli.

// Simple drift fix: schedule from the expected time
const step = 5;
let expected = Date.now() + step;
let ticks = 0;

function tick() {
  ticks = ticks + 1;
  const now = Date.now();
  const drift = now - expected; // positive if we are late
  console.log("drift:", drift, "ms");

  // Compute next expected time first
  expected = expected + step;

  // Next delay = time until the next expected timestamp
  const nextDelay = Math.max(0, expected - Date.now());

  if (ticks < 3) {
    setTimeout(tick, nextDelay);
  } else {
    console.log("aligned stop");
  }
}

setTimeout(tick, step);
setTimeout, setInterval e deriva dei timer — illustrazione 5

Suggerimenti e checklist

Suggerimenti:

  • Utilizzi sempre clearInterval al termine.
  • Preferisca cicli di setTimeout allineati per mantenere una cadenza regolare.
  • Mantenga brevi le callback dei timer per ridurre il drift.
setTimeout, setInterval e deriva dei timer — illustrazione 6

Quiz sulla correzione del drift

Verifica rapida: riduzione del drift.

setTimeout, setInterval e deriva dei timer — illustrazione 7

Riepilogo

Riepilogo: utilizzi setTimeout per le esecuzioni una tantum e setInterval per le ripetizioni (ricordando di interromperlo), quindi riduca il drift allineando le esecuzioni successive agli orari previsti.

setTimeout, setInterval e deriva dei timer — illustrazione 8

Domande Frequenti

La lezione «setTimeout, setInterval e deriva dei timer» è gratuita?

Sì — il testo completo di «setTimeout, setInterval e deriva dei timer» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 3 lezioni in totale.

Cosa imparerò in «setTimeout, setInterval e deriva dei timer»?

Pianifichi attività singole e ripetute con setTimeout/setInterval e impari una tecnica semplice per ridurre la deriva dei timer. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 3.

Quanto tempo richiede la lezione «setTimeout, setInterval e deriva dei timer»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. setTimeout, setInterval e deriva dei timer
  2. Debounce e throttle — implementazione manuale
  3. Temporizzazione delle animazioni — introduzione ai loop basati sul tempo
← Torna a JavaScript Academy