Sobes.tech
Middle+

Біз оқиға циклінде оқиғаларды басымдықтауға бола ма? Оқиға циклін өңдейтін оқиға буфері қалай жүзеге асырылады? Микротаскалар мен макротаскалар дегеніміз не, мысалдар келтіре аласыз ба?

sobes.tech AI

AI-дан жауап

JavaScript-те оқиға айналымы (event loop) оқиғаларды приоритизациялау үшін кіріктірілген механизмді ұсынбайды — барлық оқиғалар кезекке қойылады. Алайда, микротаски мен макротаски арқылы орындалу тәртібіне жанама әсер етуге болады.

Event loop — бұл асинхронды кодтың орындалуын қамтамасыз ететін оқиғалар кезегін (макротаски) және микротаски өңдейтін цикл.

Макротаски (macrotasks)

Бұл негізгі тапсырмалар, олар оқиғалар кезегіне түседі, мысалы:

  • DOM оқиғалары (click, input және т.б.)
  • setTimeout, setInterval
  • setImmediate (Node.js-де)
  • I/O операциялары

Микротаски (microtasks)

Бұл тапсырмалар, олар ағымдағы шақыру стекі аяқталғаннан кейін және келесі макротаски орындалмас бұрын орындалады:

  • Promise.then/catch/finally
  • MutationObserver

Оқиғалар буферінің жұмысы

Оқиғалар мен асинхронды операциялар тиісті кезектерге (макро- немесе микротаски) қойылады. Event loop:

  1. Ағымдағы шақыру стекін орындайды
  2. Микротаски кезегінен барлық микротаскиді орындайды
  3. Макротаски кезегінен бір макротаскиді орындайды
  4. Циклді қайталайды

Осылайша, микротаски жоғарырақ приоритетке ие және олар макротаскиден бұрын орындалады.

Приоритизация

Тікелей приоритизация жоқ, бірақ микротаскиді қолдану арқылы ағымдағы стек аяқталғаннан кейін кодты тезірек орындауға болады, ал макротаски — кейінге қалдырылған тапсырмалар үшін.

Мысал:

console.log('start');
setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('end');
// Шығу:
// start
// end
// promise
// timeout

Мұнда promise timeout-тан бұрын орындалады, себебі микротаски макротаскиден бұрын өңделеді.