ஜாவாஸ்கிரிப்டில் நிகழ்வு சுழற்சி (Event Loop)

நிகழ்வு சுழற்சி (Event loop) என்பது ஜாவாஸ்கிரிப்டில் உள்ள ஒரு அடிப்படைக் கருத்தாகும், இது ஒத்திசைவற்ற நிரலாக்கத்தை (asynchronous programming) அனுமதிக்கிறது. இது குறியீட்டை இயக்குவது, நிகழ்வுகளைச் சேகரிப்பது மற்றும் செயலாக்குவது, மற்றும் வரிசையாகப் பணிகளைச் (queued sub-tasks) செயல்படுத்துவது ஆகியவற்றிற்குப் பொறுப்பாகும்.

நிகழ்வு சுழற்சி எவ்வாறு செயல்படுகிறது

ஜாவாஸ்கிரிப்ட் ஒற்றை-த்ரெட்டைக் (single-threaded) கொண்டது, அதாவது ஒரே நேரத்தில் ஒரு துண்டு குறியீட்டை மட்டுமே இயக்க முடியும். சாத்தியமான போதெல்லாம் சிஸ்டம் கர்னலுக்கு (system kernel) செயல்பாடுகளை மாற்றுவதன் (offloading) மூலம் தடையற்ற (non-blocking) செயல்பாடுகளைச் செய்ய நிகழ்வு சுழற்சி ஜாவாஸ்கிரிப்டை அனுமதிக்கிறது.

நிகழ்வு சுழற்சியின் கூறுகள் (Components)

1. கால் ஸ்டாக் (Call Stack): கால் ஸ்டாக்கில் தான் ஜாவாஸ்கிரிப்ட் இயந்திரம் செயல்பாட்டு அழைப்புகளைக் (function calls) கண்காணிக்கிறது.
2. வெப் ஏபிஐ-கள் (Web APIs): இவை உலாவி (அல்லது Node.js) மூலம் வழங்கப்படுகின்றன மற்றும் setTimeout, DOM events மற்றும் HTTP requests போன்றவற்றை உள்ளடக்கியது.
3. பின்கூப்பிடல் வரிசை (Callback Queue): கால் ஸ்டாக் காலியான பிறகு இயக்கப்படுவதற்காகச் செயல்பாடுகள் வரிசையில் வைக்கப்படும் இடம் இதுவாகும்.
4. நிகழ்வு சுழற்சி (Event Loop): நிகழ்வு சுழற்சியானது கால் ஸ்டாக் காலியாக உள்ளதா என்பதைத் தொடர்ந்து சரிபார்க்கும். அவ்வாறு இருந்தால், இது பின்கூப்பிடல் வரிசையிலிருந்து முதல் நிகழ்வை எடுத்து அதை கால் ஸ்டாக்கிற்குத் தள்ளுகிறது (pushes).

நிகழ்வு சுழற்சிக்கு ஒரு எடுத்துக்காட்டு

நிகழ்வு சுழற்சி எவ்வாறு செயல்படுகிறது என்பதை விளக்குவதற்கான ஒரு எளிய எடுத்துக்காட்டு இங்கே:

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 0);

console.log("End");

வெளியீடு:

Start
End
Timeout

விளக்கம்

1. console.log("Start") செயல்படுத்தப்பட்டு "Start" என்று அச்சிடப்படுகிறது.
2. setTimeout அழைக்கப்படுகிறது, மேலும் பின்கூப்பிடல் (callback) Web API க்கு அனுப்பப்படுகிறது. பிரதான த்ரெட் (main thread) தொடர்கிறது.
3. console.log("End") செயல்படுத்தப்பட்டு "End" என்று அச்சிடப்படுகிறது.
4. நிகழ்வு சுழற்சி கால் ஸ்டாக்கைச் சரிபார்த்து அது காலியாக இருப்பதைக் கண்டறிகிறது. இது பின்னர் setTimeout பின்கூப்பிடலை கால் ஸ்டாக்கிற்குத் தள்ளுகிறது.
5. setTimeout பின்கூப்பிடல் செயல்படுத்தப்பட்டு "Timeout" என்று அச்சிடப்படுகிறது.

நிகழ்வு சுழற்சி செயல்பாட்டில்

நிகழ்வு சுழற்சியைச் செயல்பாட்டில் நிரூபிக்க மிகவும் சிக்கலான உதாரணம் இங்கே:

console.log("Start");

setTimeout(() => {
    console.log("Timeout 1");
}, 1000);

setTimeout(() => {
    console.log("Timeout 2");
}, 0);

Promise.resolve().then(() => {
    console.log("Promise");
});

console.log("End");

வெளியீடு:

Start
End
Promise
Timeout 2
Timeout 1

விளக்கம்

1. console.log("Start") செயல்படுத்தப்பட்டு "Start" என்று அச்சிடப்படுகிறது.
2. 1000ms தாமதத்துடன் setTimeout அழைக்கப்படுகிறது மற்றும் பின்கூப்பிடல் Web API க்கு அனுப்பப்படுகிறது.
3. 0ms தாமதத்துடன் setTimeout அழைக்கப்படுகிறது மற்றும் பின்கூப்பிடல் Web API க்கு அனுப்பப்படுகிறது.
4. Promise.resolve().then அழைக்கப்படுகிறது மற்றும் பின்கூப்பிடல் microtask வரிசைக்கு (queue) அனுப்பப்படுகிறது.
5. console.log("End") செயல்படுத்தப்பட்டு "End" என்று அச்சிடப்படுகிறது.
6. நிகழ்வு சுழற்சி கால் ஸ்டாக்கைச் சரிபார்த்து அது காலியாக இருப்பதைக் கண்டறிகிறது. பின்னர் அது முதலில் microtask வரிசையைச் செயலாக்குகிறது, Promise பின்கூப்பிடலை இயக்கி "Promise" என்று அச்சிடுகிறது.
7. நிகழ்வு சுழற்சி பின்னர் பின்கூப்பிடல் வரிசையைச் செயலாக்குகிறது, 0ms தாமதத்துடன் setTimeout ஐ இயக்கி "Timeout 2" என்று அச்சிடுகிறது.
8. இறுதியாக, 1000ms தாமதத்துடன் setTimeout செயல்படுத்தப்பட்டு "Timeout 1" என்று அச்சிடப்படுகிறது.

Microtasks (vs) Macrotasks

Microtasks (எ.கா., Promises) Macrotasks ஐ (எ.கா., setTimeout) விட அதிக முன்னுரிமையைக் கொண்டுள்ளன. அடுத்த macrotask க்குச் செல்வதற்கு முன், நிகழ்வு சுழற்சி அனைத்து microtasks ஐயும் செயலாக்குகிறது.

Microtasks மற்றும் Macrotasks க்கு ஒரு எடுத்துக்காட்டு

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
    console.log("Promise 1");
}).then(() => {
    console.log("Promise 2");
});

console.log("End");

வெளியீடு:

Start
End
Promise 1
Promise 2
Timeout

விளக்கம்

1. console.log("Start") செயல்படுத்தப்பட்டு "Start" என்று அச்சிடப்படுகிறது.
2. setTimeout அழைக்கப்படுகிறது மற்றும் பின்கூப்பிடல் Web API க்கு அனுப்பப்படுகிறது.
3. Promise.resolve().then அழைக்கப்படுகிறது மற்றும் பின்கூப்பிடல் microtask வரிசைக்கு அனுப்பப்படுகிறது.
4. console.log("End") செயல்படுத்தப்பட்டு "End" என்று அச்சிடப்படுகிறது.
5. நிகழ்வு சுழற்சி microtask வரிசையைச் செயலாக்குகிறது, Promise பின்கூப்பிடல்களை இயக்கி "Promise 1" மற்றும் "Promise 2" என்று அச்சிடுகிறது.
6. நிகழ்வு சுழற்சி பின்னர் பின்கூப்பிடல் வரிசையைச் செயலாக்குகிறது, setTimeout பின்கூப்பிடலை இயக்கி "Timeout" என்று அச்சிடுகிறது.