requestIdleCallback în JavaScript

const id = requestIdleCallback((deadline) => { ... }, { timeout: 2000 });
cancelIdleCallback(id)

Ce face requestIdleCallback

Funcția este apelată în momentele libere dintre cadre și primește un obiect deadline: deadline.timeRemaining() spune câte milisecunde mai sunt până la următoarea sarcină importantă, iar deadline.didTimeout dacă s-a ajuns la limita dată în opțiuni.

Este potrivită pentru statistici, pre-încărcări și calcule care nu trebuie să încetinească interacțiunea. Opțiunea timeout garantează rularea până la acel moment. cancelIdleCallback(id) anulează programarea.

Parametri

Parametru	Descriere
functie	Primește deadline.
optiuni	Opțional. { timeout: ms }.

Ce returnează

Un id, folosit la cancelIdleCallback.

Exemple

Exemplul 1: Trimiterea statisticilor în timpul liber

const evenimente = ["vizualizare", "clic-meniu", "derulare-75%"];

requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 1 && evenimente.length) {
    console.log("trimit", evenimente.shift());
  }
}, { timeout: 3000 });

const id = requestIdleCallback(() => console.log("nu apare"));
cancelIdleCallback(id);

Rezultat în browser

trimit vizualizare
trimit clic-meniu
trimit derulare-75%

Greșeli frecvente

• Modifici DOM-ul în requestIdleCallback. Modificarea poate forța recalcularea aranjării chiar în timpul liber; pentru DOM folosește requestAnimationFrame.

Comenzi înrudite

• requestAnimationFrame: Rulează o funcție chiar înainte de următoarea redesenare a ecranului; baza animațiilor fluide.
• setTimeout / setInterval: Rulează o funcție după o pauză (setTimeout) sau în mod repetat, la intervale egale (setInterval).
• navigator.sendBeacon: Trimite o cantitate mică de date la server chiar când pagina se închide (statistici, jurnale).