Papaskokite apie išskirtinį setTimeout funkcijos…

setTimeout(callback, 0) įdedama callback į makroužduočių eilę (macrotask queue). callback viduje esantis kodas bus vykdomas po to, kai dabartinė iškvietimų eilutė bus tuščia ir bus apdorotas kitas makro užduočių ciklas event loop'e.

Pagrindiniai naudojimo scenarijai:

Atidėtas vykdymas po renderinimo: leidžia vykdyti kodą po to, kai naršyklė apdoroja dabartinius DOM pakeitimus.

// DOM elemento keitimas
element.textContent = 'Naujas tekstas';

// Atidėtas veiksmas, priklausomas nuo atnaujinto DOM
setTimeout(() => {
  console.log('DOM atnaujintas, galima dirbti su nauju būsenos');
}, 0);

Ilgų operacijų skaidymas: padeda išvengti pagrindinio srauto užblokavimo, skaidant ilgus skaičiavimus į mažesnes dalis, vykdomas atskiruose mikrozduotėse (macrotasks).

function processLargeData(data) {
  let i = 0;
  function processChunk() {
    const chunkSize = 1000;
    const end = Math.min(i + chunkSize, data.length);

    // Duomenų dalies apdorojimas
    for (let j = i; j < end; j++) {
      // ką nors daryti su data[j]
    }

    i = end;
    if (i < data.length) {
      // atidėti kitą dalį
      setTimeout(processChunk, 0);
    } else {
      console.log('Apdorojimas baigtas');
    }
  }
  processChunk();
}

Vykdymo perdavimas po pagrindinio skripto vykdymo: užtikrina, kad tam tikras kodas bus vykdomas po to, kai bus visiškai inicializuotas dabartinis skriptas ir apdorotos visos sinchroninės operacijos.

console.log('Skripto pradžia');

setTimeout(() => {
  console.log('Vykdoma po pagrindinio skripto');
}, 0);

console.log('Skripto pabaiga');
// Rezultatas:
// Skripto pradžia
// Skripto pabaiga
// Vykdoma po pagrindinio skripto

Svarbu žinoti, kad nulinė delsimo trukmė nereiškia momentinio vykdymo. Vykdymo laikas priklauso nuo event loop apkrovos ir kitų eilėje esančių užduočių (ypač mikrozduočių) prioritetų.

Papaskokite apie išskirtinį setTimeout funkcijos naudojimo atvejį su nuliniu vėlavimu.