ജാവാസ്ക്രിപ്റ്റ് ഇവന്റ് ലൂപ്പ്: അസിൻക്രണസ് പ്രോസസ്സിംഗിന്റെ രഹസ്യം ചുരുളഴിക്കുന്നു

ജാവാസ്ക്രിപ്റ്റ്, അതിന്റെ സിംഗിൾ-ത്രെഡഡ് സ്വഭാവത്തിന് പേരുകേട്ടതാണെങ്കിലും, ഇവന്റ് ലൂപ്പ് എന്ന സംവിധാനം കാരണം കൺകറൻസി ഫലപ്രദമായി കൈകാര്യം ചെയ്യാൻ സാധിക്കുന്നു. ബ്രൗസർ, നോഡ്.ജെഎസ് തുടങ്ങിയ സാഹചര്യങ്ങളിൽ ജാവാസ്ക്രിപ്റ്റ് എങ്ങനെ അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യുന്നു എന്ന് മനസ്സിലാക്കുന്നതിനും, റെസ്പോൺസീവ്നസ് ഉറപ്പാക്കുന്നതിനും, ബ്ലോക്കിംഗ് തടയുന്നതിനും ഈ സംവിധാനം നിർണ്ണായകമാണ്.

എന്താണ് ജാവാസ്ക്രിപ്റ്റ് ഇവന്റ് ലൂപ്പ്?

സിംഗിൾ-ത്രെഡഡ് ആയിരുന്നിട്ടും നോൺ-ബ്ലോക്കിംഗ് പ്രവർത്തനങ്ങൾ നടത്താൻ ജാവാസ്ക്രിപ്റ്റിനെ അനുവദിക്കുന്ന ഒരു കൺകറൻസി മോഡലാണ് ഇവന്റ് ലൂപ്പ്. ഇത് കോൾ സ്റ്റാക്കിനെയും ടാസ്ക് ക്യൂവിനെയും (കോൾബാക്ക് ക്യൂ എന്നും അറിയപ്പെടുന്നു) തുടർച്ചയായി നിരീക്ഷിക്കുകയും, ടാസ്ക് ക്യൂവിൽ നിന്ന് ടാസ്ക്കുകൾ എക്സിക്യൂഷനായി കോൾ സ്റ്റാക്കിലേക്ക് മാറ്റുകയും ചെയ്യുന്നു. ഇത് സമാന്തര പ്രോസസ്സിംഗിന്റെ ഒരു പ്രതീതി സൃഷ്ടിക്കുന്നു, കാരണം ഓരോ ഓപ്പറേഷനും പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കാതെ അടുത്തത് ആരംഭിക്കാൻ ജാവാസ്ക്രിപ്റ്റിന് കഴിയും.

പ്രധാന ഘടകങ്ങൾ:

• കോൾ സ്റ്റാക്ക്: ഒരു LIFO (ലാസ്റ്റ്-ഇൻ, ഫസ്റ്റ്-ഔട്ട്) ഡാറ്റാ സ്ട്രക്ച്ചറാണ് ഇത്, ജാവാസ്ക്രിപ്റ്റിലെ ഫംഗ്ഷനുകളുടെ എക്സിക്യൂഷൻ ട്രാക്ക് ചെയ്യുന്നു. ഒരു ഫംഗ്ഷൻ വിളിക്കുമ്പോൾ, അത് കോൾ സ്റ്റാക്കിലേക്ക് പുഷ് ചെയ്യപ്പെടുന്നു. ഫംഗ്ഷൻ പൂർത്തിയാകുമ്പോൾ, അത് പോപ്പ് ഓഫ് ചെയ്യപ്പെടുന്നു.
• ടാസ്ക് ക്യൂ (കോൾബാക്ക് ക്യൂ): എക്സിക്യൂട്ട് ചെയ്യാനായി കാത്തിരിക്കുന്ന കോൾബാക്ക് ഫംഗ്ഷനുകളുടെ ഒരു ക്യൂ. ഈ കോൾബാക്കുകൾ സാധാരണയായി ടൈമറുകൾ, നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ, ഉപയോക്തൃ ഇവന്റുകൾ പോലുള്ള അസിൻക്രണസ് പ്രവർത്തനങ്ങളുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു.
• വെബ് എപിഐകൾ (അല്ലെങ്കിൽ നോഡ്.ജെഎസ് എപിഐകൾ): അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യുന്ന ബ്രൗസർ (ക്ലയിന്റ്-സൈഡ് ജാവാസ്ക്രിപ്റ്റിന്റെ കാര്യത്തിൽ) അല്ലെങ്കിൽ നോഡ്.ജെഎസ് (സെർവർ-സൈഡ് ജാവാസ്ക്രിപ്റ്റിനായി) നൽകുന്ന എപിഐകളാണ് ഇവ. ബ്രൗസറിലെ setTimeout, XMLHttpRequest (അല്ലെങ്കിൽ Fetch API), DOM ഇവന്റ് ലിസണറുകൾ, നോഡ്.ജെഎസ്സിലെ ഫയൽ സിസ്റ്റം പ്രവർത്തനങ്ങൾ അല്ലെങ്കിൽ നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ എന്നിവ ഉദാഹരണങ്ങളാണ്.
• ഇവന്റ് ലൂപ്പ്: കോൾ സ്റ്റാക്ക് ശൂന്യമാണോ എന്ന് നിരന്തരം പരിശോധിക്കുന്ന പ്രധാന ഘടകം. അങ്ങനെയാണെങ്കിൽ, ടാസ്ക് ക്യൂവിൽ ടാസ്ക്കുകൾ ഉണ്ടെങ്കിൽ, ഇവന്റ് ലൂപ്പ് ടാസ്ക് ക്യൂവിൽ നിന്ന് ആദ്യത്തെ ടാസ്ക് എക്സിക്യൂഷനായി കോൾ സ്റ്റാക്കിലേക്ക് മാറ്റുന്നു.
• മൈക്രോടാസ്ക് ക്യൂ: സാധാരണ ടാസ്ക്കുകളേക്കാൾ ഉയർന്ന മുൻഗണനയുള്ള മൈക്രോടാസ്ക്കുകൾക്കായുള്ള ഒരു പ്രത്യേക ക്യൂ. മൈക്രോടാസ്ക്കുകൾ സാധാരണയായി പ്രോമിസുകളുമായും (Promises) മ്യൂട്ടേഷൻ ഒബ്സർവറുമായും (MutationObserver) ബന്ധപ്പെട്ടിരിക്കുന്നു.

ഇവന്റ് ലൂപ്പ് എങ്ങനെ പ്രവർത്തിക്കുന്നു: ഒരു ഘട്ടം ഘട്ടമായുള്ള വിശദീകരണം

1. കോഡ് എക്സിക്യൂഷൻ: ജാവാസ്ക്രിപ്റ്റ് കോഡ് എക്സിക്യൂട്ട് ചെയ്യാൻ തുടങ്ങുന്നു, ഫംഗ്ഷനുകൾ വിളിക്കുമ്പോൾ അവയെ കോൾ സ്റ്റാക്കിലേക്ക് പുഷ് ചെയ്യുന്നു.
2. അസിൻക്രണസ് പ്രവർത്തനം: ഒരു അസിൻക്രണസ് പ്രവർത്തനം (ഉദാഹരണത്തിന്, setTimeout, fetch) നേരിടുമ്പോൾ, അത് ഒരു വെബ് എപിഐക്ക് (അല്ലെങ്കിൽ നോഡ്.ജെഎസ് എപിഐക്ക്) കൈമാറുന്നു.
3. വെബ് എപിഐ കൈകാര്യം ചെയ്യൽ: വെബ് എപിഐ (അല്ലെങ്കിൽ നോഡ്.ജെഎസ് എപിഐ) പശ്ചാത്തലത്തിൽ അസിൻക്രണസ് പ്രവർത്തനം കൈകാര്യം ചെയ്യുന്നു. ഇത് ജാവാസ്ക്രിപ്റ്റ് ത്രെഡിനെ തടയുന്നില്ല.
4. കോൾബാക്ക് സ്ഥാപിക്കൽ: അസിൻക്രണസ് പ്രവർത്തനം പൂർത്തിയായിക്കഴിഞ്ഞാൽ, വെബ് എപിഐ (അല്ലെങ്കിൽ നോഡ്.ജെഎസ് എപിഐ) അനുബന്ധ കോൾബാക്ക് ഫംഗ്ഷനെ ടാസ്ക് ക്യൂവിലേക്ക് സ്ഥാപിക്കുന്നു.
5. ഇവന്റ് ലൂപ്പ് നിരീക്ഷണം: ഇവന്റ് ലൂപ്പ് കോൾ സ്റ്റാക്കിനെയും ടാസ്ക് ക്യൂവിനെയും തുടർച്ചയായി നിരീക്ഷിക്കുന്നു.
6. കോൾ സ്റ്റാക്ക് ശൂന്യമാണോയെന്ന് പരിശോധിക്കൽ: ഇവന്റ് ലൂപ്പ് കോൾ സ്റ്റാക്ക് ശൂന്യമാണോ എന്ന് പരിശോധിക്കുന്നു.
7. ടാസ്ക് നീക്കൽ: കോൾ സ്റ്റാക്ക് ശൂന്യമാണെങ്കിൽ, ടാസ്ക് ക്യൂവിൽ ടാസ്ക്കുകൾ ഉണ്ടെങ്കിൽ, ഇവന്റ് ലൂപ്പ് ടാസ്ക് ക്യൂവിൽ നിന്ന് ആദ്യത്തെ ടാസ്ക് കോൾ സ്റ്റാക്കിലേക്ക് മാറ്റുന്നു.
8. കോൾബാക്ക് എക്സിക്യൂഷൻ: കോൾബാക്ക് ഫംഗ്ഷൻ ഇപ്പോൾ എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു, അത് കൂടുതൽ ഫംഗ്ഷനുകളെ കോൾ സ്റ്റാക്കിലേക്ക് പുഷ് ചെയ്തേക്കാം.
9. മൈക്രോടാസ്ക് എക്സിക്യൂഷൻ: ഒരു ടാസ്ക് (അല്ലെങ്കിൽ സിൻക്രണസ് ടാസ്ക്കുകളുടെ ഒരു ശ്രേണി) പൂർത്തിയാക്കി കോൾ സ്റ്റാക്ക് ശൂന്യമായ ശേഷം, ഇവന്റ് ലൂപ്പ് മൈക്രോടാസ്ക് ക്യൂ പരിശോധിക്കുന്നു. മൈക്രോടാസ്ക്കുകൾ ഉണ്ടെങ്കിൽ, മൈക്രോടാസ്ക് ക്യൂ ശൂന്യമാകുന്നതുവരെ അവ ഒന്നിനുപുറകെ ഒന്നായി എക്സിക്യൂട്ട് ചെയ്യപ്പെടും. അതിനുശേഷം മാത്രമേ ഇവന്റ് ലൂപ്പ് ടാസ്ക് ക്യൂവിൽ നിന്ന് മറ്റൊരു ടാസ്ക് എടുക്കുകയുള്ളൂ.
10. ആവർത്തനം: ഈ പ്രക്രിയ തുടർച്ചയായി ആവർത്തിക്കുന്നു, ഇത് മെയിൻ ത്രെഡിനെ തടസ്സപ്പെടുത്താതെ അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ കാര്യക്ഷമമായി കൈകാര്യം ചെയ്യപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

പ്രായോഗിക ഉദാഹരണങ്ങൾ: ഇവന്റ് ലൂപ്പ് പ്രവർത്തനത്തിൽ

ഉദാഹരണം 1: setTimeout

ഒരു നിശ്ചിത സമയത്തിന് ശേഷം ഒരു കോൾബാക്ക് ഫംഗ്ഷൻ എക്സിക്യൂട്ട് ചെയ്യാൻ setTimeout എങ്ങനെ ഇവന്റ് ലൂപ്പ് ഉപയോഗിക്കുന്നുവെന്ന് ഈ ഉദാഹരണം കാണിക്കുന്നു.

            
console.log('Start');

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

console.log('End');

            

              
                Copy
              
            
          

ഔട്ട്പുട്ട്:

Start
End
Timeout Callback

വിശദീകരണം:

1. console.log('Start') ഉടൻ എക്സിക്യൂട്ട് ചെയ്യുകയും പ്രിന്റ് ചെയ്യുകയും ചെയ്യുന്നു.
2. setTimeout വിളിക്കപ്പെടുന്നു. കോൾബാക്ക് ഫംഗ്ഷനും കാലതാമസവും (0ms) വെബ് എപിഐക്ക് കൈമാറുന്നു.
3. വെബ് എപിഐ പശ്ചാത്തലത്തിൽ ഒരു ടൈമർ ആരംഭിക്കുന്നു.
4. console.log('End') ഉടൻ എക്സിക്യൂട്ട് ചെയ്യുകയും പ്രിന്റ് ചെയ്യുകയും ചെയ്യുന്നു.
5. ടൈമർ പൂർത്തിയാകുമ്പോൾ (കാലതാമസം 0ms ആണെങ്കിലും), കോൾബാക്ക് ഫംഗ്ഷൻ ടാസ്ക് ക്യൂവിൽ സ്ഥാപിക്കപ്പെടുന്നു.
6. ഇവന്റ് ലൂപ്പ് കോൾ സ്റ്റാക്ക് ശൂന്യമാണോ എന്ന് പരിശോധിക്കുന്നു. അത് ശൂന്യമായതിനാൽ, കോൾബാക്ക് ഫംഗ്ഷൻ ടാസ്ക് ക്യൂവിൽ നിന്ന് കോൾ സ്റ്റാക്കിലേക്ക് മാറ്റുന്നു.
7. കോൾബാക്ക് ഫംഗ്ഷനായ console.log('Timeout Callback') എക്സിക്യൂട്ട് ചെയ്യുകയും പ്രിന്റ് ചെയ്യുകയും ചെയ്യുന്നു.

ഉദാഹരണം 2: Fetch API (Promises)

അസിൻക്രണസ് നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ കൈകാര്യം ചെയ്യാൻ Fetch API എങ്ങനെ പ്രോമിസുകളും മൈക്രോടാസ്ക് ക്യൂവും ഉപയോഗിക്കുന്നുവെന്ന് ഈ ഉദാഹരണം കാണിക്കുന്നു.

            
console.log('Requesting data...');

fetch('https://jsonplaceholder.typicode.com/todos/1')
 .then(response => response.json())
 .then(data => console.log('Data received:', data))
 .catch(error => console.error('Error:', error));

console.log('Request sent!');

            

              
                Copy
              
            
          

(അഭ്യർത്ഥന വിജയകരമാണെങ്കിൽ) സാധ്യമായ ഔട്ട്പുട്ട്:

Requesting data...
Request sent!
Data received: { userId: 1, id: 1, title: 'delectus aut autem', completed: false }

വിശദീകരണം:

1. console.log('Requesting data...') എക്സിക്യൂട്ട് ചെയ്യുന്നു.
2. fetch വിളിക്കപ്പെടുന്നു. അഭ്യർത്ഥന സെർവറിലേക്ക് അയയ്ക്കുന്നു (ഒരു വെബ് എപിഐ ഇത് കൈകാര്യം ചെയ്യുന്നു).
3. console.log('Request sent!') എക്സിക്യൂട്ട് ചെയ്യുന്നു.
4. സെർവർ പ്രതികരിക്കുമ്പോൾ, then കോൾബാക്കുകൾ മൈക്രോടാസ്ക് ക്യൂവിൽ സ്ഥാപിക്കപ്പെടുന്നു (കാരണം പ്രോമിസുകൾ ഉപയോഗിക്കുന്നു).
5. നിലവിലെ ടാസ്ക് (സ്ക്രിപ്റ്റിന്റെ സിൻക്രണസ് ഭാഗം) പൂർത്തിയായ ശേഷം, ഇവന്റ് ലൂപ്പ് മൈക്രോടാസ്ക് ക്യൂ പരിശോധിക്കുന്നു.
6. ആദ്യത്തെ then കോൾബാക്ക് (response => response.json()) എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു, അത് JSON റെസ്പോൺസ് പാഴ്സ് ചെയ്യുന്നു.
7. രണ്ടാമത്തെ then കോൾബാക്ക് (data => console.log('Data received:', data)) എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു, അത് ലഭിച്ച ഡാറ്റ ലോഗ് ചെയ്യുന്നു.
8. അഭ്യർത്ഥനയ്ക്കിടെ എന്തെങ്കിലും പിശകുണ്ടെങ്കിൽ, പകരം catch കോൾബാക്ക് എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു.

ഉദാഹരണം 3: നോഡ്.ജെഎസ് ഫയൽ സിസ്റ്റം

ഈ ഉദാഹരണം നോഡ്.ജെഎസ്സിലെ അസിൻക്രണസ് ഫയൽ റീഡിംഗ് കാണിക്കുന്നു.

            
const fs = require('fs');

console.log('Reading file...');

fs.readFile('example.txt', 'utf8', (err, data) => {
 if (err) {
 console.error('Error reading file:', err);
 return;
 }
 console.log('File content:', data);
});

console.log('File read operation initiated.');

            

              
                Copy
              
            
          

('example.txt' എന്ന ഫയൽ നിലവിലുണ്ടെങ്കിൽ, അതിൽ 'Hello, world!' എന്ന ഉള്ളടക്കം ഉണ്ടെങ്കിൽ) സാധ്യമായ ഔട്ട്പുട്ട്:

Reading file...
File read operation initiated.
File content: Hello, world!

വിശദീകരണം:

1. console.log('Reading file...') എക്സിക്യൂട്ട് ചെയ്യുന്നു.
2. fs.readFile വിളിക്കപ്പെടുന്നു. ഫയൽ റീഡിംഗ് പ്രവർത്തനം നോഡ്.ജെഎസ് എപിഐക്ക് കൈമാറുന്നു.
3. console.log('File read operation initiated.') എക്സിക്യൂട്ട് ചെയ്യുന്നു.
4. ഫയൽ റീഡിംഗ് പൂർത്തിയായിക്കഴിഞ്ഞാൽ, കോൾബാക്ക് ഫംഗ്ഷൻ ടാസ്ക് ക്യൂവിൽ സ്ഥാപിക്കപ്പെടുന്നു.
5. ഇവന്റ് ലൂപ്പ് കോൾബാക്കിനെ ടാസ്ക് ക്യൂവിൽ നിന്ന് കോൾ സ്റ്റാക്കിലേക്ക് മാറ്റുന്നു.
6. കോൾബാക്ക് ഫംഗ്ഷൻ ((err, data) => { ... }) എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു, ഫയൽ ഉള്ളടക്കം കൺസോളിൽ ലോഗ് ചെയ്യുന്നു.

മൈക്രോടാസ്ക് ക്യൂ മനസ്സിലാക്കുന്നു

മൈക്രോടാസ്ക് ക്യൂ ഇവന്റ് ലൂപ്പിന്റെ ഒരു നിർണ്ണായക ഭാഗമാണ്. നിലവിലെ ടാസ്ക് പൂർത്തിയായ ശേഷം ഉടൻ എക്സിക്യൂട്ട് ചെയ്യേണ്ട ചെറിയ ടാസ്ക്കുകൾ കൈകാര്യം ചെയ്യാനാണ് ഇത് ഉപയോഗിക്കുന്നത്, എന്നാൽ ഇവന്റ് ലൂപ്പ് ടാസ്ക് ക്യൂവിൽ നിന്ന് അടുത്ത ടാസ്ക് എടുക്കുന്നതിന് മുമ്പ്. പ്രോമിസുകളും മ്യൂട്ടേഷൻ ഒബ്സർവർ കോൾബാക്കുകളും സാധാരണയായി മൈക്രോടാസ്ക് ക്യൂവിൽ സ്ഥാപിക്കപ്പെടുന്നു.

പ്രധാന സ്വഭാവങ്ങൾ:

• ഉയർന്ന മുൻഗണന: ടാസ്ക് ക്യൂവിലെ സാധാരണ ടാസ്ക്കുകളേക്കാൾ മൈക്രോടാസ്ക്കുകൾക്ക് ഉയർന്ന മുൻഗണനയുണ്ട്.
• ഉടനടിയുള്ള എക്സിക്യൂഷൻ: നിലവിലെ ടാസ്ക്കിന് ശേഷവും ഇവന്റ് ലൂപ്പ് ടാസ്ക് ക്യൂവിൽ നിന്ന് അടുത്ത ടാസ്ക് പ്രോസസ്സ് ചെയ്യുന്നതിന് മുമ്പും മൈക്രോടാസ്ക്കുകൾ ഉടൻ എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു.
• ക്യൂ ശൂന്യമാക്കൽ: ടാസ്ക് ക്യൂവിലേക്ക് പോകുന്നതിന് മുമ്പ് മൈക്രോടാസ്ക് ക്യൂ ശൂന്യമാകുന്നതുവരെ ഇവന്റ് ലൂപ്പ് മൈക്രോടാസ്ക്കുകൾ എക്സിക്യൂട്ട് ചെയ്യുന്നത് തുടരും. ഇത് മൈക്രോടാസ്ക്കുകളുടെ സ്റ്റാർവേഷൻ തടയുകയും അവ കൃത്യസമയത്ത് കൈകാര്യം ചെയ്യപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കുകയും ചെയ്യുന്നു.

ഉദാഹരണം: പ്രോമിസ് റെസല്യൂഷൻ

            
console.log('Start');

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

console.log('End');

            

              
                Copy
              
            
          

ഔട്ട്പുട്ട്:

Start
End
Promise resolved

വിശദീകരണം:

1. console.log('Start') എക്സിക്യൂട്ട് ചെയ്യുന്നു.
2. Promise.resolve().then(...) ഒരു റിസോൾവ്ഡ് പ്രോമിസ് സൃഷ്ടിക്കുന്നു. then കോൾബാക്ക് മൈക്രോടാസ്ക് ക്യൂവിൽ സ്ഥാപിക്കപ്പെടുന്നു.
3. console.log('End') എക്സിക്യൂട്ട് ചെയ്യുന്നു.
4. നിലവിലെ ടാസ്ക് (സ്ക്രിപ്റ്റിന്റെ സിൻക്രണസ് ഭാഗം) പൂർത്തിയായ ശേഷം, ഇവന്റ് ലൂപ്പ് മൈക്രോടാസ്ക് ക്യൂ പരിശോധിക്കുന്നു.
5. then കോൾബാക്ക് (console.log('Promise resolved')) എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു, സന്ദേശം കൺസോളിൽ ലോഗ് ചെയ്യുന്നു.

Async/Await: പ്രോമിസുകൾക്കുള്ള സിന്റാക്റ്റിക് ഷുഗർ

async, await എന്നീ കീവേഡുകൾ പ്രോമിസുകളുമായി പ്രവർത്തിക്കാൻ കൂടുതൽ എളുപ്പത്തിൽ വായിക്കാവുന്നതും സിൻക്രണസ് പോലെ തോന്നുന്നതുമായ ഒരു മാർഗ്ഗം നൽകുന്നു. ഇവ അടിസ്ഥാനപരമായി പ്രോമിസുകളുടെ മുകളിലുള്ള സിന്റാക്റ്റിക് ഷുഗർ ആണ്, ഇവ ഇവന്റ് ലൂപ്പിന്റെ അടിസ്ഥാനപരമായ പ്രവർത്തനത്തെ മാറ്റുന്നില്ല.

ഉദാഹരണം: Async/Await ഉപയോഗിച്ച്

            
async function fetchData() {
 console.log('Requesting data...');
 try {
 const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
 const data = await response.json();
 console.log('Data received:', data);
 } catch (error) {
 console.error('Error:', error);
 }
 console.log('Function completed');
}

fetchData();
console.log('Fetch Data function called');

            

              
                Copy
              
            
          

(അഭ്യർത്ഥന വിജയകരമാണെങ്കിൽ) സാധ്യമായ ഔട്ട്പുട്ട്:

Requesting data...
Fetch Data function called
Data received: { userId: 1, id: 1, title: 'delectus aut autem', completed: false }
Function completed

വിശദീകരണം:

1. fetchData() വിളിക്കപ്പെടുന്നു.
2. console.log('Requesting data...') എക്സിക്യൂട്ട് ചെയ്യുന്നു.
3. await fetch(...) എന്നത് fetch നൽകുന്ന പ്രോമിസ് റിസോൾവ് ആകുന്നതുവരെ fetchData ഫംഗ്ഷന്റെ എക്സിക്യൂഷൻ താൽക്കാലികമായി നിർത്തുന്നു. കൺട്രോൾ ഇവന്റ് ലൂപ്പിലേക്ക് തിരികെ നൽകുന്നു.
4. console.log('Fetch Data function called') എക്സിക്യൂട്ട് ചെയ്യുന്നു.
5. fetch പ്രോമിസ് റിസോൾവ് ആകുമ്പോൾ, fetchData-യുടെ എക്സിക്യൂഷൻ പുനരാരംഭിക്കുന്നു.
6. response.json() വിളിക്കപ്പെടുന്നു, await കീവേഡ് വീണ്ടും JSON പാഴ്സിംഗ് പൂർത്തിയാകുന്നതുവരെ എക്സിക്യൂഷൻ താൽക്കാലികമായി നിർത്തുന്നു.
7. console.log('Data received:', data) എക്സിക്യൂട്ട് ചെയ്യുന്നു.
8. console.log('Function completed') എക്സിക്യൂട്ട് ചെയ്യുന്നു.
9. അഭ്യർത്ഥനയ്ക്കിടെ എന്തെങ്കിലും പിശകുണ്ടെങ്കിൽ, catch ബ്ലോക്ക് എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നു.

വിവിധ സാഹചര്യങ്ങളിലെ ഇവന്റ് ലൂപ്പ്: ബ്രൗസർ vs. നോഡ്.ജെഎസ്

ബ്രൗസർ, നോഡ്.ജെഎസ് എന്നീ രണ്ട് സാഹചര്യങ്ങളിലും ഇവന്റ് ലൂപ്പ് ഒരു അടിസ്ഥാന ആശയമാണ്, എന്നാൽ അവയുടെ നിർവഹണത്തിലും ലഭ്യമായ എപിഐകളിലും ചില പ്രധാന വ്യത്യാസങ്ങളുണ്ട്.

ബ്രൗസർ സാഹചര്യം

• വെബ് എപിഐകൾ: ബ്രൗസർ setTimeout, XMLHttpRequest (അല്ലെങ്കിൽ Fetch API), DOM ഇവന്റ് ലിസണറുകൾ (ഉദാഹരണത്തിന്, addEventListener), വെബ് വർക്കറുകൾ തുടങ്ങിയ വെബ് എപിഐകൾ നൽകുന്നു.
• ഉപയോക്തൃ ഇടപെടലുകൾ: ക്ലിക്കുകൾ, കീ അമർത്തലുകൾ, മൗസ് ചലനങ്ങൾ തുടങ്ങിയ ഉപയോക്തൃ ഇടപെടലുകൾ മെയിൻ ത്രെഡിനെ തടസ്സപ്പെടുത്താതെ കൈകാര്യം ചെയ്യുന്നതിന് ഇവന്റ് ലൂപ്പ് നിർണ്ണായകമാണ്.
• റെൻഡറിംഗ്: ബ്രൗസർ പ്രതികരണശേഷിയുള്ളതായി നിലനിർത്തുന്നുവെന്ന് ഉറപ്പാക്കിക്കൊണ്ട്, ഉപയോക്തൃ ഇന്റർഫേസിന്റെ റെൻഡറിംഗും ഇവന്റ് ലൂപ്പ് കൈകാര്യം ചെയ്യുന്നു.

നോഡ്.ജെഎസ് സാഹചര്യം

• നോഡ്.ജെഎസ് എപിഐകൾ: ഫയൽ സിസ്റ്റം പ്രവർത്തനങ്ങൾ (fs.readFile), നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ (http അല്ലെങ്കിൽ https പോലുള്ള മൊഡ്യൂളുകൾ ഉപയോഗിച്ച്), ഡാറ്റാബേസ് ഇടപെടലുകൾ തുടങ്ങിയ അസിൻക്രണസ് പ്രവർത്തനങ്ങൾക്കായി നോഡ്.ജെഎസ് അതിന്റേതായ എപിഐകൾ നൽകുന്നു.
• I/O പ്രവർത്തനങ്ങൾ: നോഡ്.ജെഎസ്സിൽ I/O പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യുന്നതിന് ഇവന്റ് ലൂപ്പ് വളരെ പ്രധാനമാണ്, കാരണം ഈ പ്രവർത്തനങ്ങൾ അസിൻക്രണസായി കൈകാര്യം ചെയ്തില്ലെങ്കിൽ സമയമെടുക്കുന്നതും ബ്ലോക്കിംഗും ആകാം.
• Libuv: ഇവന്റ് ലൂപ്പും അസിൻക്രണസ് I/O പ്രവർത്തനങ്ങളും കൈകാര്യം ചെയ്യാൻ നോഡ്.ജെഎസ് libuv എന്ന ഒരു ലൈബ്രറി ഉപയോഗിക്കുന്നു.

ഇവന്റ് ലൂപ്പുമായി പ്രവർത്തിക്കുമ്പോൾ ശ്രദ്ധിക്കേണ്ട കാര്യങ്ങൾ

• മെയിൻ ത്രെഡ് ബ്ലോക്ക് ചെയ്യുന്നത് ഒഴിവാക്കുക: ദൈർഘ്യമേറിയ സിൻക്രണസ് പ്രവർത്തനങ്ങൾ മെയിൻ ത്രെഡിനെ തടസ്സപ്പെടുത്തുകയും ആപ്ലിക്കേഷനെ പ്രതികരണശേഷിയില്ലാത്തതാക്കുകയും ചെയ്യും. സാധ്യമാകുമ്പോഴെല്ലാം അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ ഉപയോഗിക്കുക. സിപിയു-ഇന്റൻസീവ് ടാസ്ക്കുകൾക്കായി ബ്രൗസറുകളിൽ വെബ് വർക്കറുകളും നോഡ്.ജെഎസ്സിൽ വർക്കർ ത്രെഡുകളും ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.
• കോൾബാക്ക് ഫംഗ്ഷനുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുക: കോൾബാക്ക് ഫംഗ്ഷനുകൾ എക്സിക്യൂട്ട് ചെയ്യാൻ എടുക്കുന്ന സമയം കുറയ്ക്കുന്നതിന് അവ ചെറുതും കാര്യക്ഷമവുമാക്കി നിലനിർത്തുക. ഒരു കോൾബാക്ക് ഫംഗ്ഷൻ സങ്കീർണ്ണമായ പ്രവർത്തനങ്ങൾ നടത്തുന്നുണ്ടെങ്കിൽ, അതിനെ ചെറുതും കൈകാര്യം ചെയ്യാവുന്നതുമായ കഷണങ്ങളായി വിഭജിക്കുന്നത് പരിഗണിക്കുക.
• പിശകുകൾ ശരിയായി കൈകാര്യം ചെയ്യുക: കൈകാര്യം ചെയ്യപ്പെടാത്ത എക്സെപ്ഷനുകൾ ആപ്ലിക്കേഷൻ ക്രാഷ് ആകുന്നത് തടയാൻ അസിൻക്രണസ് പ്രവർത്തനങ്ങളിലെ പിശകുകൾ എല്ലായ്പ്പോഴും കൈകാര്യം ചെയ്യുക. പിശകുകൾ ഭംഗിയായി പിടിക്കാനും കൈകാര്യം ചെയ്യാനും try...catch ബ്ലോക്കുകൾ അല്ലെങ്കിൽ പ്രോമിസ് catch ഹാൻഡ്‌ലറുകൾ ഉപയോഗിക്കുക.
• പ്രോമിസുകളും Async/Await-ഉം ഉപയോഗിക്കുക: പരമ്പരാഗത കോൾബാക്ക് ഫംഗ്ഷനുകളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ പ്രോമിസുകളും async/await-ഉം അസിൻക്രണസ് കോഡുമായി പ്രവർത്തിക്കാൻ കൂടുതൽ ഘടനാപരവും വായിക്കാവുന്നതുമായ ഒരു മാർഗ്ഗം നൽകുന്നു. അവ പിശകുകൾ കൈകാര്യം ചെയ്യുന്നതും അസിൻക്രണസ് കൺട്രോൾ ഫ്ലോ നിയന്ത്രിക്കുന്നതും എളുപ്പമാക്കുന്നു.
• മൈക്രോടാസ്ക് ക്യൂവിനെക്കുറിച്ച് ശ്രദ്ധിക്കുക: മൈക്രോടാസ്ക് ക്യൂവിന്റെ സ്വഭാവവും അത് അസിൻക്രണസ് പ്രവർത്തനങ്ങളുടെ എക്സിക്യൂഷൻ ക്രമത്തെ എങ്ങനെ ബാധിക്കുന്നുവെന്നും മനസ്സിലാക്കുക. അമിതമായി ദൈർഘ്യമുള്ളതോ സങ്കീർണ്ണമായതോ ആയ മൈക്രോടാസ്ക്കുകൾ ചേർക്കുന്നത് ഒഴിവാക്കുക, കാരണം അവ ടാസ്ക് ക്യൂവിൽ നിന്നുള്ള സാധാരണ ടാസ്ക്കുകളുടെ എക്സിക്യൂഷൻ വൈകിപ്പിക്കും.
• സ്ട്രീമുകൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക: വലിയ ഫയലുകൾക്കോ ഡാറ്റാ സ്ട്രീമുകൾക്കോ വേണ്ടി, ഫയൽ മുഴുവനായി മെമ്മറിയിലേക്ക് ലോഡ് ചെയ്യുന്നത് ഒഴിവാക്കാൻ പ്രോസസ്സിംഗിനായി സ്ട്രീമുകൾ ഉപയോഗിക്കുക.

സാധാരണ പിഴവുകളും അവ എങ്ങനെ ഒഴിവാക്കാം

• കോൾബാക്ക് ഹെൽ (Callback Hell): ആഴത്തിൽ നെസ്റ്റ് ചെയ്ത കോൾബാക്ക് ഫംഗ്ഷനുകൾ വായിക്കാനും പരിപാലിക്കാനും ബുദ്ധിമുട്ടാകും. കോൾബാക്ക് ഹെൽ ഒഴിവാക്കാനും കോഡിന്റെ വായനാക്ഷമത മെച്ചപ്പെടുത്താനും പ്രോമിസുകളോ async/await-ഓ ഉപയോഗിക്കുക.
• സാൽഗോ (Zalgo): ഇൻപുട്ടിനെ ആശ്രയിച്ച് സിൻക്രണസായോ അസിൻക്രണസായോ എക്സിക്യൂട്ട് ചെയ്യാൻ കഴിയുന്ന കോഡിനെയാണ് സാൽഗോ എന്ന് പറയുന്നത്. ഈ പ്രവചനാതീത സ്വഭാവം അപ്രതീക്ഷിത പെരുമാറ്റത്തിനും ഡീബഗ് ചെയ്യാൻ ബുദ്ധിമുട്ടുള്ള പ്രശ്നങ്ങൾക്കും ഇടയാക്കും. അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ എല്ലായ്പ്പോഴും അസിൻക്രണസായിത്തന്നെ എക്സിക്യൂട്ട് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുക.
• മെമ്മറി ലീക്കുകൾ (Memory Leaks): കോൾബാക്ക് ഫംഗ്ഷനുകളിലെ വേരിയബിളുകളിലേക്കോ ഒബ്ജക്റ്റുകളിലേക്കോ ഉള്ള അനാവശ്യ റഫറൻസുകൾ അവ ഗാർബേജ് കളക്ട് ചെയ്യപ്പെടുന്നതിൽ നിന്ന് തടയുകയും മെമ്മറി ലീക്കുകളിലേക്ക് നയിക്കുകയും ചെയ്യും. ക്ലോഷറുകളെക്കുറിച്ച് ശ്രദ്ധിക്കുക, അനാവശ്യ റഫറൻസുകൾ സൃഷ്ടിക്കുന്നത് ഒഴിവാക്കുക.
• സ്റ്റാർവേഷൻ (Starvation): മൈക്രോടാസ്ക്കുകൾ തുടർച്ചയായി മൈക്രോടാസ്ക് ക്യൂവിലേക്ക് ചേർത്താൽ, അത് ടാസ്ക് ക്യൂവിൽ നിന്നുള്ള ടാസ്ക്കുകൾ എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നതിൽ നിന്ന് തടയുകയും സ്റ്റാർവേഷനിലേക്ക് നയിക്കുകയും ചെയ്യും. അമിതമായി ദൈർഘ്യമുള്ളതോ സങ്കീർണ്ണമായതോ ആയ മൈക്രോടാസ്ക്കുകൾ ഒഴിവാക്കുക.
• കൈകാര്യം ചെയ്യാത്ത പ്രോമിസ് റിജക്ഷനുകൾ (Unhandled Promise Rejections): ഒരു പ്രോമിസ് റിജക്ട് ചെയ്യപ്പെടുകയും catch ഹാൻഡ്‌ലർ ഇല്ലെങ്കിൽ, റിജക്ഷൻ കൈകാര്യം ചെയ്യപ്പെടാതെ പോകും. ഇത് അപ്രതീക്ഷിത പെരുമാറ്റത്തിനും സാധ്യമായ ക്രാഷുകൾക്കും ഇടയാക്കും. പിശക് ലോഗ് ചെയ്യാൻ മാത്രമാണെങ്കിൽ പോലും, പ്രോമിസ് റിജക്ഷനുകൾ എല്ലായ്പ്പോഴും കൈകാര്യം ചെയ്യുക.

അന്താരാഷ്ട്രവൽക്കരണ (i18n) പരിഗണനകൾ

അസിൻക്രണസ് പ്രവർത്തനങ്ങളും ഇവന്റ് ലൂപ്പും കൈകാര്യം ചെയ്യുന്ന ആപ്ലിക്കേഷനുകൾ വികസിപ്പിക്കുമ്പോൾ, വിവിധ പ്രദേശങ്ങളിലും വിവിധ ഭാഷകളിലുമുള്ള ഉപയോക്താക്കൾക്ക് ആപ്ലിക്കേഷൻ ശരിയായി പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ അന്താരാഷ്ട്രവൽക്കരണം (i18n) പരിഗണിക്കേണ്ടത് പ്രധാനമാണ്. ചില പരിഗണനകൾ താഴെ നൽകുന്നു:

• തീയതിയും സമയവും ഫോർമാറ്റിംഗ്: ടൈമറുകളോ ഷെഡ്യൂളിംഗോ ഉൾപ്പെടുന്ന അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യുമ്പോൾ വിവിധ ലൊക്കേലുകൾക്ക് അനുയോജ്യമായ തീയതിയും സമയവും ഫോർമാറ്റിംഗ് ഉപയോഗിക്കുക. Intl.DateTimeFormat പോലുള്ള ലൈബ്രറികൾ ഇതിന് സഹായിക്കും. ഉദാഹരണത്തിന്, ജപ്പാനിൽ തീയതികൾ പലപ്പോഴും YYYY/MM/DD ഫോർമാറ്റിലാണ്, എന്നാൽ യുഎസ്സിൽ അവ സാധാരണയായി MM/DD/YYYY ഫോർമാറ്റിലാണ്.
• നമ്പർ ഫോർമാറ്റിംഗ്: സംഖ്യാപരമായ ഡാറ്റ ഉൾപ്പെടുന്ന അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യുമ്പോൾ വിവിധ ലൊക്കേലുകൾക്ക് അനുയോജ്യമായ നമ്പർ ഫോർമാറ്റിംഗ് ഉപയോഗിക്കുക. Intl.NumberFormat പോലുള്ള ലൈബ്രറികൾ ഇതിന് സഹായിക്കും. ഉദാഹരണത്തിന്, ചില യൂറോപ്യൻ രാജ്യങ്ങളിൽ ആയിരങ്ങളെ വേർതിരിക്കുന്നതിന് കോമയ്ക്ക് (,) പകരം ഒരു ഡോട്ട് (.) ആണ് ഉപയോഗിക്കുന്നത്.
• ടെക്സ്റ്റ് എൻകോഡിംഗ്: ഫയലുകൾ വായിക്കുകയോ എഴുതുകയോ പോലുള്ള ടെക്സ്റ്റ് ഡാറ്റ ഉൾപ്പെടുന്ന അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യുമ്പോൾ ആപ്ലിക്കേഷൻ ശരിയായ ടെക്സ്റ്റ് എൻകോഡിംഗ് (ഉദാഹരണത്തിന്, UTF-8) ഉപയോഗിക്കുന്നുവെന്ന് ഉറപ്പാക്കുക. വിവിധ ഭാഷകൾക്ക് വ്യത്യസ്ത ക്യാരക്ടർ സെറ്റുകൾ ആവശ്യമായി വന്നേക്കാം.
• പിശക് സന്ദേശങ്ങളുടെ പ്രാദേശികവൽക്കരണം: അസിൻക്രണസ് പ്രവർത്തനങ്ങളുടെ ഫലമായി ഉപയോക്താവിന് പ്രദർശിപ്പിക്കുന്ന പിശക് സന്ദേശങ്ങൾ പ്രാദേശികവൽക്കരിക്കുക. ഉപയോക്താക്കൾക്ക് അവരുടെ മാതൃഭാഷയിൽ സന്ദേശങ്ങൾ മനസ്സിലാകുന്നുവെന്ന് ഉറപ്പാക്കാൻ വിവിധ ഭാഷകളിലേക്ക് വിവർത്തനങ്ങൾ നൽകുക.
• വലത്തുനിന്ന്-ഇടത്തോട്ടുള്ള (RTL) ലേഔട്ട്: ആപ്ലിക്കേഷന്റെ ഉപയോക്തൃ ഇന്റർഫേസിൽ RTL ലേഔട്ടുകളുടെ സ്വാധീനം പരിഗണിക്കുക, പ്രത്യേകിച്ച് യുഐ-യിലെ അസിൻക്രണസ് അപ്ഡേറ്റുകൾ കൈകാര്യം ചെയ്യുമ്പോൾ. RTL ഭാഷകളുമായി ലേഔട്ട് ശരിയായി പൊരുത്തപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കുക.
• സമയ മേഖലകൾ (Time Zones): നിങ്ങളുടെ ആപ്ലിക്കേഷൻ വിവിധ പ്രദേശങ്ങളിലുടനീളം സമയം ഷെഡ്യൂൾ ചെയ്യുകയോ പ്രദർശിപ്പിക്കുകയോ ചെയ്യുന്നുണ്ടെങ്കിൽ, ഉപയോക്താക്കൾക്ക് പൊരുത്തക്കേടുകളും ആശയക്കുഴപ്പങ്ങളും ഒഴിവാക്കാൻ സമയ മേഖലകൾ ശരിയായി കൈകാര്യം ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. സമയ മേഖലകൾ കൈകാര്യം ചെയ്യാൻ മോമെന്റ് ടൈംസോൺ (Moment Timezone) പോലുള്ള ലൈബ്രറികൾ സഹായിക്കും (ഇപ്പോൾ മെയിന്റനൻസ് മോഡിലാണെങ്കിലും, ബദലുകൾ ഗവേഷണം ചെയ്യണം).

ഉപസംഹാരം

ജാവാസ്ക്രിപ്റ്റിലെ അസിൻക്രണസ് പ്രോഗ്രാമിംഗിന്റെ ഒരു അടിസ്ഥാന ശിലയാണ് ജാവാസ്ക്രിപ്റ്റ് ഇവന്റ് ലൂപ്പ്. കാര്യക്ഷമവും പ്രതികരണശേഷിയുള്ളതും നോൺ-ബ്ലോക്കിംഗ് ആപ്ലിക്കേഷനുകൾ എഴുതുന്നതിന് ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്ന് മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്. കോൾ സ്റ്റാക്ക്, ടാസ്ക് ക്യൂ, മൈക്രോടാസ്ക് ക്യൂ, വെബ് എപിഐകൾ എന്നിവയുടെ ആശയങ്ങൾ മനസ്സിലാക്കുന്നതിലൂടെ, ഡെവലപ്പർമാർക്ക് ബ്രൗസർ, നോഡ്.ജെഎസ് സാഹചര്യങ്ങളിൽ മികച്ച ഉപയോക്തൃ അനുഭവങ്ങൾ സൃഷ്ടിക്കാൻ അസിൻക്രണസ് പ്രോഗ്രാമിംഗിന്റെ ശക്തി പ്രയോജനപ്പെടുത്താൻ കഴിയും. മികച്ച രീതികൾ സ്വീകരിക്കുന്നതും സാധാരണ പിഴവുകൾ ഒഴിവാക്കുന്നതും കൂടുതൽ ശക്തവും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ കോഡിലേക്ക് നയിക്കും. ഇവന്റ് ലൂപ്പുമായി തുടർച്ചയായി പര്യവേക്ഷണം ചെയ്യുകയും പരീക്ഷിക്കുകയും ചെയ്യുന്നത് നിങ്ങളുടെ ധാരണയെ ആഴത്തിലാക്കുകയും സങ്കീർണ്ണമായ അസിൻക്രണസ് വെല്ലുവിളികളെ ആത്മവിശ്വാസത്തോടെ നേരിടാൻ നിങ്ങളെ അനുവദിക്കുകയും ചെയ്യും.