ജാവാസ്ക്രിപ്റ്റ് ഇവന്റ് ലൂപ്പിന്റെ ഉള്ളറകൾ: അസിങ്ക്രണസ് പ്രോസസ്സിംഗിന്റെ എഞ്ചിൻ

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

എന്താണ് അസിങ്ക്രണസ് പ്രോസസ്സിംഗ്?

ഇവന്റ് ലൂപ്പിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, അസിങ്ക്രണസ് പ്രോസസ്സിംഗ് എന്ന ആശയം മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്. ഒരു സിൻക്രണസ് മാതൃകയിൽ, ടാസ്ക്കുകൾ ക്രമാനുഗതമായി നടപ്പിലാക്കുന്നു. ഒരു പ്രോഗ്രാം ഒരു ടാസ്ക് പൂർത്തിയാകുന്നതുവരെ കാത്തിരുന്നതിന് ശേഷമാണ് അടുത്തതിലേക്ക് നീങ്ങുന്നത്. ഒരു പാചകക്കാരൻ ഭക്ഷണം തയ്യാറാക്കുന്നത് സങ്കൽപ്പിക്കുക: അവർ പച്ചക്കറികൾ അരിയുന്നു, പിന്നെ അത് പാകം ചെയ്യുന്നു, അതിനുശേഷം പാത്രത്തിൽ വിളമ്പുന്നു, ഓരോ ഘട്ടങ്ങളായി. അരിയാൻ കൂടുതൽ സമയമെടുത്താൽ, പാചകം ചെയ്യാനും വിളമ്പാനും കാത്തിരിക്കേണ്ടിവരും.

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

അസിങ്ക്രണസ് പ്രോസസ്സിംഗ് ഇല്ലെങ്കിൽ, ഒരു ലളിതമായ നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനയ്ക്ക് പോലും മുഴുവൻ യൂസർ ഇന്റർഫേസും മരവിപ്പിക്കാൻ കഴിയും. ഇത് നിങ്ങളുടെ വെബ്‌സൈറ്റോ ആപ്ലിക്കേഷനോ ഉപയോഗിക്കുന്ന ഏതൊരാൾക്കും, അവരുടെ ഭൂമിശാസ്ത്രപരമായ സ്ഥാനം പരിഗണിക്കാതെ, നിരാശാജനകമായ ഒരു അനുഭവത്തിലേക്ക് നയിക്കും.

ജാവാസ്ക്രിപ്റ്റ് ഇവന്റ് ലൂപ്പിന്റെ പ്രധാന ഘടകങ്ങൾ

ഇവന്റ് ലൂപ്പ് ജാവാസ്ക്രിപ്റ്റ് എഞ്ചിന്റെ (Chrome-ലെ V8 അല്ലെങ്കിൽ Firefox-ലെ SpiderMonkey പോലുള്ളവ) ഭാഗമല്ല. പകരം, ജാവാസ്ക്രിപ്റ്റ് കോഡ് എക്സിക്യൂട്ട് ചെയ്യുന്ന റൺടൈം എൻവയോൺമെന്റ് (വെബ് ബ്രൗസർ അല്ലെങ്കിൽ Node.js പോലുള്ളവ) നൽകുന്ന ഒരു ആശയമാണിത്. ഈ എൻവയോൺമെന്റ് അസിങ്ക്രണസ് പ്രവർത്തനങ്ങൾ സുഗമമാക്കുന്നതിന് ആവശ്യമായ API-കളും സംവിധാനങ്ങളും നൽകുന്നു.

അസിങ്ക്രണസ് പ്രോസസ്സിംഗ് യാഥാർത്ഥ്യമാക്കാൻ ഒരുമിച്ച് പ്രവർത്തിക്കുന്ന പ്രധാന ഘടകങ്ങൾ നമുക്ക് പരിശോധിക്കാം:

1. കോൾ സ്റ്റാക്ക് (The Call Stack)

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

ഈ ലളിതമായ ഉദാഹരണം പരിഗണിക്കുക:

            function first() {
  console.log('First function called');
  second();
}

function second() {
  console.log('Second function called');
  third();
}

function third() {
  console.log('Third function called');
}

first();

            

              
                Copy
              
            
          

first() വിളിക്കുമ്പോൾ, അത് സ്റ്റാക്കിലേക്ക് പുഷ് ചെയ്യപ്പെടുന്നു. തുടർന്ന്, അത് second()-നെ വിളിക്കുന്നു, അത് first()-ന്റെ മുകളിൽ പുഷ് ചെയ്യപ്പെടുന്നു. ഒടുവിൽ, second() third()-നെ വിളിക്കുന്നു, അത് മുകളിൽ പുഷ് ചെയ്യപ്പെടുന്നു. ഓരോ ഫംഗ്ഷനും പൂർത്തിയാകുമ്പോൾ, അത് സ്റ്റാക്കിൽ നിന്ന് പോപ്പ് ചെയ്യപ്പെടുന്നു, ആദ്യം third(), പിന്നെ second(), ഒടുവിൽ first().

2. വെബ് API-കൾ / ബ്രൗസർ API-കൾ (ബ്രൗസറുകൾക്കായി), C++ API-കൾ (Node.js-നായി)

ജാവാസ്ക്രിപ്റ്റ് സിംഗിൾ-ത്രെഡഡ് ആണെങ്കിലും, ബ്രൗസർ (അല്ലെങ്കിൽ Node.js) പശ്ചാത്തലത്തിൽ ദീർഘനേരം പ്രവർത്തിക്കുന്ന ഓപ്പറേഷനുകൾ കൈകാര്യം ചെയ്യാൻ കഴിയുന്ന ശക്തമായ API-കൾ നൽകുന്നു. ഈ API-കൾ C++ പോലുള്ള ഒരു ലോ-ലെവൽ ഭാഷയിലാണ് നടപ്പിലാക്കുന്നത്, അവ ജാവാസ്ക്രിപ്റ്റ് എഞ്ചിന്റെ ഭാഗമല്ല. ഉദാഹരണങ്ങൾ ഉൾപ്പെടുന്നു:

• setTimeout(): ഒരു നിശ്ചിത കാലതാമസത്തിന് ശേഷം ഒരു ഫംഗ്ഷൻ എക്സിക്യൂട്ട് ചെയ്യുന്നു.
• setInterval(): ഒരു നിശ്ചിത ഇടവേളയിൽ ഒരു ഫംഗ്ഷൻ ആവർത്തിച്ച് എക്സിക്യൂട്ട് ചെയ്യുന്നു.
• fetch(): നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ നടത്താൻ (ഉദാഹരണത്തിന്, ഒരു API-യിൽ നിന്ന് ഡാറ്റ വീണ്ടെടുക്കാൻ).
• DOM ഇവന്റുകൾ: ക്ലിക്ക്, സ്ക്രോൾ, കീബോർഡ് ഇവന്റുകൾ പോലുള്ളവ.
• requestAnimationFrame(): ആനിമേഷനുകൾ കാര്യക്ഷമമായി നടത്തുന്നതിന്.

നിങ്ങൾ ഈ വെബ് API-കളിൽ ഒന്ന് വിളിക്കുമ്പോൾ (ഉദാഹരണത്തിന്, setTimeout()), ബ്രൗസർ ആ ടാസ്ക് ഏറ്റെടുക്കുന്നു. ജാവാസ്ക്രിപ്റ്റ് എഞ്ചിൻ അത് പൂർത്തിയാകാൻ കാത്തിരിക്കുന്നില്ല. പകരം, API-യുമായി ബന്ധപ്പെട്ട കോൾബാക്ക് ഫംഗ്ഷൻ ബ്രൗസറിന്റെ ആന്തരിക സംവിധാനങ്ങളിലേക്ക് കൈമാറുന്നു. ഓപ്പറേഷൻ പൂർത്തിയായിക്കഴിഞ്ഞാൽ (ഉദാഹരണത്തിന്, ടൈമർ അവസാനിക്കുമ്പോൾ, അല്ലെങ്കിൽ ഡാറ്റ ലഭ്യമാകുമ്പോൾ), കോൾബാക്ക് ഫംഗ്ഷൻ ഒരു ക്യൂവിലേക്ക് സ്ഥാപിക്കുന്നു.

3. കോൾബാക്ക് ക്യൂ (ടാസ്ക് ക്യൂ അല്ലെങ്കിൽ മാക്രോടാസ്ക് ക്യൂ)

എക്സിക്യൂട്ട് ചെയ്യാൻ തയ്യാറായ കോൾബാക്ക് ഫംഗ്ഷനുകൾ സൂക്ഷിക്കുന്ന ഒരു ഡാറ്റാ ഘടനയാണ് കോൾബാക്ക് ക്യൂ. ഒരു അസിങ്ക്രണസ് ഓപ്പറേഷൻ (ഒരു setTimeout കോൾബാക്ക് അല്ലെങ്കിൽ ഒരു DOM ഇവന്റ് പോലുള്ളവ) പൂർത്തിയാകുമ്പോൾ, അതിന്റെ കോൾബാക്ക് ഫംഗ്ഷൻ ഈ ക്യൂവിന്റെ അവസാനത്തിലേക്ക് ചേർക്കപ്പെടുന്നു. പ്രധാന ജാവാസ്ക്രിപ്റ്റ് ത്രെഡ് പ്രോസസ്സ് ചെയ്യാൻ തയ്യാറായിരിക്കുന്ന ടാസ്ക്കുകളുടെ ഒരു വെയിറ്റിംഗ് ലൈനായി ഇതിനെ കരുതുക.

കോൾ സ്റ്റാക്ക് പൂർണ്ണമായും ശൂന്യമാകുമ്പോൾ മാത്രമേ ഇവന്റ് ലൂപ്പ് കോൾബാക്ക് ക്യൂ പരിശോധിക്കുകയുള്ളൂ എന്നത് വളരെ പ്രധാനമാണ്. ഇത് നടന്നുകൊണ്ടിരിക്കുന്ന സിൻക്രണസ് ഓപ്പറേഷനുകൾ തടസ്സപ്പെടുന്നില്ലെന്ന് ഉറപ്പാക്കുന്നു.

4. മൈക്രോടാസ്ക് ക്യൂ (ജോബ് ക്യൂ)

ജാവാസ്ക്രിപ്റ്റിൽ അടുത്തിടെ അവതരിപ്പിച്ച മൈക്രോടാസ്ക് ക്യൂ, കോൾബാക്ക് ക്യൂവിലുള്ളവയേക്കാൾ ഉയർന്ന മുൻഗണനയുള്ള ഓപ്പറേഷനുകൾക്കായുള്ള കോൾബാക്കുകൾ സൂക്ഷിക്കുന്നു. ഇവ സാധാരണയായി പ്രോമിസുകളുമായും (Promises) async/await സിന്റാക്സുമായും ബന്ധപ്പെട്ടിരിക്കുന്നു.

മൈക്രോടാസ്ക്കുകളുടെ ഉദാഹരണങ്ങൾ:

• പ്രോമിസുകളിൽ നിന്നുള്ള കോൾബാക്കുകൾ (.then(), .catch(), .finally()).
• queueMicrotask().
• MutationObserver കോൾബാക്കുകൾ.

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

ഇവന്റ് ലൂപ്പ് എങ്ങനെയാണ് അസിങ്ക്രണസ് ടാസ്ക്കുകൾ ഏകോപിപ്പിക്കുന്നത്

കോൾ സ്റ്റാക്കും ക്യൂകളും നിരന്തരം നിരീക്ഷിക്കുക, ടാസ്ക്കുകൾ ശരിയായ ക്രമത്തിൽ എക്സിക്യൂട്ട് ചെയ്യപ്പെടുന്നുവെന്നും ആപ്ലിക്കേഷൻ പ്രതികരണശേഷിയുള്ളതായി തുടരുന്നുവെന്നും ഉറപ്പാക്കുക എന്നതാണ് ഇവന്റ് ലൂപ്പിന്റെ പ്രധാന ജോലി.

തുടർച്ചയായ ഈ ചക്രം താഴെ നൽകുന്നു:

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

ഈ തുടർച്ചയായ ചക്രമാണ് ജാവാസ്ക്രിപ്റ്റിന് യഥാർത്ഥ മൾട്ടി-ത്രെഡിംഗ് ഇല്ലാതെ ഒരേസമയം നടക്കുന്നതായി തോന്നുന്ന പ്രവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യാൻ സഹായിക്കുന്നത്.

വിശദീകരണ ഉദാഹരണങ്ങൾ

ഇവന്റ് ലൂപ്പിന്റെ സ്വഭാവം വ്യക്തമാക്കുന്ന ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ നോക്കാം.

ഉദാഹരണം 1: setTimeout

            console.log('Start');

setTimeout(function callback() {
  console.log('Timeout callback executed');
}, 0);

console.log('End');

            

              
                Copy
              
            
          

പ്രതീക്ഷിക്കുന്ന ഔട്ട്പുട്ട്:

            Start
End
Timeout callback executed

            

              
                Copy
              
            
          

വിശദീകരണം:

• console.log('Start'); ഉടൻ തന്നെ എക്സിക്യൂട്ട് ചെയ്യുകയും കോൾ സ്റ്റാക്കിൽ നിന്ന് പുഷ്/പോപ്പ് ചെയ്യപ്പെടുകയും ചെയ്യുന്നു.
• setTimeout(...) വിളിക്കപ്പെടുന്നു. ജാവാസ്ക്രിപ്റ്റ് എഞ്ചിൻ കോൾബാക്ക് ഫംഗ്ഷനും കാലതാമസവും (0 മില്ലിസെക്കൻഡ്) ബ്രൗസറിന്റെ വെബ് API-ക്ക് കൈമാറുന്നു. വെബ് API ഒരു ടൈമർ ആരംഭിക്കുന്നു.
• console.log('End'); ഉടൻ തന്നെ എക്സിക്യൂട്ട് ചെയ്യുകയും കോൾ സ്റ്റാക്കിൽ നിന്ന് പുഷ്/പോപ്പ് ചെയ്യപ്പെടുകയും ചെയ്യുന്നു.
• ഈ സമയത്ത്, കോൾ സ്റ്റാക്ക് ശൂന്യമാണ്. ഇവന്റ് ലൂപ്പ് ക്യൂകൾ പരിശോധിക്കുന്നു.
• setTimeout സജ്ജമാക്കിയ ടൈമർ, 0 കാലതാമസമാണെങ്കിൽ പോലും, ഒരു മാക്രോടാസ്ക് ആയി കണക്കാക്കപ്പെടുന്നു. ടൈമർ അവസാനിച്ചുകഴിഞ്ഞാൽ, കോൾബാക്ക് ഫംഗ്ഷൻ function callback() {...} കോൾബാക്ക് ക്യൂവിലേക്ക് സ്ഥാപിക്കുന്നു.
• ഇവന്റ് ലൂപ്പ് കോൾ സ്റ്റാക്ക് ശൂന്യമാണെന്ന് കാണുന്നു, തുടർന്ന് കോൾബാക്ക് ക്യൂ പരിശോധിക്കുന്നു. അത് കോൾബാക്ക് കണ്ടെത്തുകയും, കോൾ സ്റ്റാക്കിലേക്ക് പുഷ് ചെയ്യുകയും എക്സിക്യൂട്ട് ചെയ്യുകയും ചെയ്യുന്നു.

ഇവിടെ പ്രധാനമായി മനസ്സിലാക്കേണ്ടത്, 0-മില്ലിസെക്കൻഡ് കാലതാമസം പോലും കോൾബാക്ക് ഉടൻ എക്സിക്യൂട്ട് ചെയ്യുമെന്ന് അർത്ഥമാക്കുന്നില്ല. ഇത് ഇപ്പോഴും ഒരു അസിങ്ക്രണസ് ഓപ്പറേഷനാണ്, നിലവിലെ സിൻക്രണസ് കോഡ് പൂർത്തിയാകാനും കോൾ സ്റ്റാക്ക് ശൂന്യമാകാനും ഇത് കാത്തിരിക്കുന്നു.

ഉദാഹരണം 2: പ്രോമിസുകളും setTimeout-ഉം

മൈക്രോടാസ്ക് ക്യൂവിന്റെ മുൻഗണന കാണാൻ നമുക്ക് പ്രോമിസുകളെ setTimeout-മായി സംയോജിപ്പിക്കാം.

            console.log('Start');

setTimeout(function setTimeoutCallback() {
  console.log('setTimeout callback');
}, 0);

Promise.resolve().then(function promiseCallback() {
  console.log('Promise callback');
});

console.log('End');

            

              
                Copy
              
            
          

പ്രതീക്ഷിക്കുന്ന ഔട്ട്പുട്ട്:

            Start
End
Promise callback
setTimeout callback

            

              
                Copy
              
            
          

വിശദീകരണം:

• 'Start' ലോഗ് ചെയ്യുന്നു.
• setTimeout അതിന്റെ കോൾബാക്ക് കോൾബാക്ക് ക്യൂവിലേക്ക് ഷെഡ്യൂൾ ചെയ്യുന്നു.
• Promise.resolve().then(...) ഒരു റിസോൾവ്ഡ് പ്രോമിസ് ഉണ്ടാക്കുന്നു, അതിന്റെ .then() കോൾബാക്ക് മൈക്രോടാസ്ക് ക്യൂവിലേക്ക് ഷെഡ്യൂൾ ചെയ്യുന്നു.
• 'End' ലോഗ് ചെയ്യുന്നു.
• ഇപ്പോൾ കോൾ സ്റ്റാക്ക് ശൂന്യമാണ്. ഇവന്റ് ലൂപ്പ് ആദ്യം മൈക്രോടാസ്ക് ക്യൂ പരിശോധിക്കുന്നു.
• അത് promiseCallback കണ്ടെത്തുന്നു, എക്സിക്യൂട്ട് ചെയ്യുന്നു, തുടർന്ന് 'Promise callback' ലോഗ് ചെയ്യുന്നു. മൈക്രോടാസ്ക് ക്യൂ ഇപ്പോൾ ശൂന്യമാണ്.
• തുടർന്ന്, ഇവന്റ് ലൂപ്പ് കോൾബാക്ക് ക്യൂ പരിശോധിക്കുന്നു. അത് setTimeoutCallback കണ്ടെത്തുന്നു, അതിനെ കോൾ സ്റ്റാക്കിലേക്ക് പുഷ് ചെയ്യുകയും എക്സിക്യൂട്ട് ചെയ്യുകയും, 'setTimeout callback' ലോഗ് ചെയ്യുകയും ചെയ്യുന്നു.

പ്രോമിസ് കോൾബാക്കുകൾ പോലുള്ള മൈക്രോടാസ്ക്കുകൾ, setTimeout കോൾബാക്കുകൾ പോലുള്ള മാക്രോടാസ്ക്കുകൾക്ക് മുമ്പാണ് പ്രോസസ്സ് ചെയ്യപ്പെടുന്നത് എന്ന് ഇത് വ്യക്തമായി കാണിക്കുന്നു, രണ്ടാമത്തേതിന് 0 കാലതാമസമാണെങ്കിൽ പോലും.

ഉദാഹരണം 3: ക്രമാനുഗതമായ അസിങ്ക്രണസ് പ്രവർത്തനങ്ങൾ

രണ്ട് വ്യത്യസ്ത എൻഡ്‌പോയിന്റുകളിൽ നിന്ന് ഡാറ്റ ലഭ്യമാക്കുന്നത് സങ്കൽപ്പിക്കുക, ഇവിടെ രണ്ടാമത്തെ അഭ്യർത്ഥന ആദ്യത്തേതിനെ ആശ്രയിച്ചിരിക്കുന്നു.

            function fetchData(url) {
  return new Promise((resolve, reject) => {
    console.log(`Fetching data from: ${url}`);
    setTimeout(() => {
      // Simulate network latency
      resolve(`Data from ${url}`);
    }, Math.random() * 1000 + 500); // Simulate 0.5s to 1.5s latency
  });
}

async function processData() {
  console.log('Starting data processing...');

  try {
    const data1 = await fetchData('/api/users');
    console.log('Received:', data1);

    const data2 = await fetchData('/api/posts');
    console.log('Received:', data2);

    console.log('Data processing complete!');
  } catch (error) {
    console.error('Error processing data:', error);
  }
}

processData();
console.log('Initiated data processing.');

            

              
                Copy
              
            
          

സാധ്യമായ ഔട്ട്പുട്ട് (ക്രമരഹിതമായ സമയപരിധി കാരണം ലഭ്യമാക്കുന്നതിന്റെ ക്രമം ചെറുതായി വ്യത്യാസപ്പെടാം):

            
Starting data processing...
Initiated data processing.
Fetching data from: /api/users
Fetching data from: /api/posts
// ... some delay ...
Received: Data from /api/users
Received: Data from /api/posts
Data processing complete!

            

              
                Copy
              
            
          

വിശദീകരണം:

• processData() വിളിക്കപ്പെടുന്നു, 'Starting data processing...' ലോഗ് ചെയ്യുന്നു.
• ആദ്യത്തെ await-നു ശേഷം എക്സിക്യൂഷൻ പുനരാരംഭിക്കാൻ async ഫംഗ്ഷൻ ഒരു മൈക്രോടാസ്ക് സജ്ജമാക്കുന്നു.
• fetchData('/api/users') വിളിക്കപ്പെടുന്നു. ഇത് 'Fetching data from: /api/users' ലോഗ് ചെയ്യുകയും വെബ് API-യിൽ ഒരു setTimeout ആരംഭിക്കുകയും ചെയ്യുന്നു.
• console.log('Initiated data processing.'); എക്സിക്യൂട്ട് ചെയ്യുന്നു. ഇത് നിർണായകമാണ്: നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ പുരോഗമിക്കുമ്പോൾ പ്രോഗ്രാം മറ്റ് ടാസ്ക്കുകൾ പ്രവർത്തിപ്പിക്കുന്നത് തുടരുന്നു.
• processData()-യുടെ പ്രാരംഭ എക്സിക്യൂഷൻ അവസാനിക്കുന്നു, അതിന്റെ ആന്തരിക അസിങ്ക് തുടർപ്രവർത്തനം (ആദ്യത്തെ await-നായി) മൈക്രോടാസ്ക് ക്യൂവിലേക്ക് പുഷ് ചെയ്യുന്നു.
• ഇപ്പോൾ കോൾ സ്റ്റാക്ക് ശൂന്യമാണ്. ഇവന്റ് ലൂപ്പ് processData()-ൽ നിന്നുള്ള മൈക്രോടാസ്ക് പ്രോസസ്സ് ചെയ്യുന്നു.
• ആദ്യത്തെ await നേരിടുന്നു. fetchData കോൾബാക്ക് (ആദ്യത്തെ setTimeout-ൽ നിന്ന്) ടൈംഔട്ട് പൂർത്തിയായാൽ കോൾബാക്ക് ക്യൂവിലേക്ക് ഷെഡ്യൂൾ ചെയ്യപ്പെടുന്നു.
• ഇവന്റ് ലൂപ്പ് വീണ്ടും മൈക്രോടാസ്ക് ക്യൂ പരിശോധിക്കുന്നു. മറ്റ് മൈക്രോടാസ്ക്കുകൾ ഉണ്ടായിരുന്നെങ്കിൽ അവ പ്രവർത്തിക്കും. മൈക്രോടാസ്ക് ക്യൂ ശൂന്യമാകുമ്പോൾ, അത് കോൾബാക്ക് ക്യൂ പരിശോധിക്കുന്നു.
• fetchData('/api/users')-നുള്ള ആദ്യത്തെ setTimeout പൂർത്തിയാകുമ്പോൾ, അതിന്റെ കോൾബാക്ക് കോൾബാക്ക് ക്യൂവിലേക്ക് സ്ഥാപിക്കുന്നു. ഇവന്റ് ലൂപ്പ് അത് എടുത്ത് എക്സിക്യൂട്ട് ചെയ്യുന്നു, 'Received: Data from /api/users' ലോഗ് ചെയ്യുന്നു, തുടർന്ന് processData അസിങ്ക് ഫംഗ്ഷൻ പുനരാരംഭിക്കുന്നു, രണ്ടാമത്തെ await-നെ നേരിടുന്നു.
• രണ്ടാമത്തെ `fetchData` കോളിനായി ഈ പ്രക്രിയ ആവർത്തിക്കുന്നു.

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

അസിങ്ക്രണസ് ജാവാസ്ക്രിപ്റ്റിനുള്ള മികച്ച രീതികൾ

ഇവന്റ് ലൂപ്പ് മനസ്സിലാക്കുന്നത് കൂടുതൽ കാര്യക്ഷമവും പ്രവചിക്കാവുന്നതുമായ ജാവാസ്ക്രിപ്റ്റ് കോഡ് എഴുതാൻ നിങ്ങളെ പ്രാപ്തരാക്കുന്നു. ചില മികച്ച രീതികൾ ഇതാ:

• പ്രോമിസുകളും async/await-ഉം സ്വീകരിക്കുക: ഈ ആധുനിക സവിശേഷതകൾ പരമ്പരാഗത കോൾബാക്കുകളേക്കാൾ അസിങ്ക്രണസ് കോഡിനെ കൂടുതൽ വൃത്തിയുള്ളതും മനസ്സിലാക്കാൻ എളുപ്പമുള്ളതുമാക്കുന്നു. അവ മൈക്രോടാസ്ക് ക്യൂവുമായി തടസ്സമില്ലാതെ സംയോജിക്കുന്നു, എക്സിക്യൂഷൻ ഓർഡറിൽ മികച്ച നിയന്ത്രണം നൽകുന്നു.
• കോൾബാക്ക് ഹെൽ (Callback Hell) ശ്രദ്ധിക്കുക: കോൾബാക്കുകൾ അടിസ്ഥാനപരമാണെങ്കിലും, ആഴത്തിൽ നെസ്റ്റ് ചെയ്ത കോൾബാക്കുകൾ കൈകാര്യം ചെയ്യാൻ കഴിയാത്ത കോഡിലേക്ക് നയിച്ചേക്കാം. ഇതിനുള്ള മികച്ച പരിഹാരങ്ങളാണ് പ്രോമിസുകളും async/await-ഉം.
• ക്യൂകളുടെ മുൻഗണന മനസ്സിലാക്കുക: മൈക്രോടാസ്ക്കുകൾ എല്ലായ്പ്പോഴും മാക്രോടാസ്ക്കുകൾക്ക് മുമ്പാണ് പ്രോസസ്സ് ചെയ്യുന്നതെന്ന് ഓർക്കുക. പ്രോമിസുകൾ ചെയിൻ ചെയ്യുമ്പോഴോ queueMicrotask ഉപയോഗിക്കുമ്പോഴോ ഇത് പ്രധാനമാണ്.
• ദീർഘനേരം പ്രവർത്തിക്കുന്ന സിൻക്രണസ് പ്രവർത്തനങ്ങൾ ഒഴിവാക്കുക: കോൾ സ്റ്റാക്കിൽ എക്സിക്യൂട്ട് ചെയ്യാൻ കൂടുതൽ സമയമെടുക്കുന്ന ഏതൊരു ജാവാസ്ക്രിപ്റ്റ് കോഡും ഇവന്റ് ലൂപ്പിനെ തടയും. ഭാരമേറിയ കണക്കുകൂട്ടലുകൾ ഒഴിവാക്കുക അല്ലെങ്കിൽ ആവശ്യമെങ്കിൽ യഥാർത്ഥ സമാന്തര പ്രോസസ്സിംഗിനായി വെബ് വർക്കറുകൾ (Web Workers) ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.
• നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ ഒപ്റ്റിമൈസ് ചെയ്യുക: fetch കാര്യക്ഷമമായി ഉപയോഗിക്കുക. നെറ്റ്‌വർക്ക് കോളുകളുടെ എണ്ണം കുറയ്ക്കുന്നതിന് അഭ്യർത്ഥനകൾ ഒരുമിപ്പിക്കുക അല്ലെങ്കിൽ കാഷിംഗ് പോലുള്ള സാങ്കേതിക വിദ്യകൾ പരിഗണിക്കുക.
• പിശകുകൾ കൃത്യമായി കൈകാര്യം ചെയ്യുക: അസിങ്ക്രണസ് പ്രവർത്തനങ്ങൾക്കിടയിലുള്ള പിശകുകൾ കൈകാര്യം ചെയ്യാൻ async/await-നൊപ്പം try...catch ബ്ലോക്കുകളും പ്രോമിസുകൾക്കൊപ്പം .catch()-ഉം ഉപയോഗിക്കുക.
• ആനിമേഷനുകൾക്കായി requestAnimationFrame ഉപയോഗിക്കുക: സുഗമമായ വിഷ്വൽ അപ്‌ഡേറ്റുകൾക്കായി, setTimeout അല്ലെങ്കിൽ setInterval-നേക്കാൾ requestAnimationFrame ആണ് നല്ലത്, കാരണം ഇത് ബ്രൗസറിന്റെ റീപെയിന്റ് സൈക്കിളുമായി സമന്വയിപ്പിക്കുന്നു.

ആഗോള പരിഗണനകൾ

ജാവാസ്ക്രിപ്റ്റ് ഇവന്റ് ലൂപ്പിന്റെ തത്വങ്ങൾ സാർവത്രികമാണ്, ഡെവലപ്പർമാരുടെയോ അന്തിമ ഉപയോക്താക്കളുടെയോ സ്ഥാനം പരിഗണിക്കാതെ എല്ലാവർക്കും ഇത് ബാധകമാണ്. എന്നിരുന്നാലും, ചില ആഗോള പരിഗണനകളുണ്ട്:

• നെറ്റ്‌വർക്ക് ലേറ്റൻസി: ലോകത്തിന്റെ വിവിധ ഭാഗങ്ങളിലുള്ള ഉപയോക്താക്കൾക്ക് ഡാറ്റ ലഭ്യമാക്കുമ്പോൾ വ്യത്യസ്ത നെറ്റ്‌വർക്ക് ലേറ്റൻസികൾ അനുഭവപ്പെടും. ഈ വ്യത്യാസങ്ങളെ കൃത്യമായി കൈകാര്യം ചെയ്യാൻ നിങ്ങളുടെ അസിങ്ക്രണസ് കോഡ് ശക്തമായിരിക്കണം. ഇതിനർത്ഥം ശരിയായ ടൈംഔട്ടുകൾ, പിശക് കൈകാര്യം ചെയ്യൽ, ആവശ്യമെങ്കിൽ ഫാൾബാക്ക് സംവിധാനങ്ങൾ എന്നിവ നടപ്പിലാക്കുക എന്നതാണ്.
• ഉപകരണത്തിന്റെ പ്രകടനം: പല വികസ്വര രാജ്യങ്ങളിലും സാധാരണമായ പഴയതോ ശക്തി കുറഞ്ഞതോ ആയ ഉപകരണങ്ങൾക്ക് വേഗത കുറഞ്ഞ ജാവാസ്ക്രിപ്റ്റ് എഞ്ചിനുകളും കുറഞ്ഞ മെമ്മറിയും ഉണ്ടായിരിക്കാം. വിഭവങ്ങൾ അധികം ഉപയോഗിക്കാത്ത കാര്യക്ഷമമായ അസിങ്ക്രണസ് കോഡ് എല്ലായിടത്തും നല്ലൊരു ഉപയോക്തൃ അനുഭവത്തിന് അത്യന്താപേക്ഷിതമാണ്.
• സമയ മേഖലകൾ (Time Zones): ഇവന്റ് ലൂപ്പിനെ സമയ മേഖലകൾ നേരിട്ട് ബാധിക്കുന്നില്ലെങ്കിലും, നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് ഇടപെടാൻ സാധ്യതയുള്ള സെർവർ-സൈഡ് പ്രവർത്തനങ്ങളുടെ ഷെഡ്യൂളിംഗിനെ ഇത് ബാധിച്ചേക്കാം. നിങ്ങളുടെ ബാക്കെൻഡ് ലോജിക് സമയ മേഖല മാറ്റങ്ങൾ ശരിയായി കൈകാര്യം ചെയ്യുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.
• പ്രവേശനക്ഷമത (Accessibility): നിങ്ങളുടെ അസിങ്ക്രണസ് പ്രവർത്തനങ്ങൾ സഹായ സാങ്കേതികവിദ്യകളെ ആശ്രയിക്കുന്ന ഉപയോക്താക്കളെ പ്രതികൂലമായി ബാധിക്കുന്നില്ലെന്ന് ഉറപ്പാക്കുക. ഉദാഹരണത്തിന്, അസിങ്ക്രണസ് പ്രവർത്തനങ്ങൾ മൂലമുണ്ടാകുന്ന അപ്‌ഡേറ്റുകൾ സ്ക്രീൻ റീഡറുകൾക്ക് അറിയിപ്പ് നൽകുന്നുണ്ടെന്ന് ഉറപ്പുവരുത്തുക.

ഉപസംഹാരം

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

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

വെബ് ഡെവലപ്‌മെന്റിലെ നിങ്ങളുടെ യാത്ര തുടരുമ്പോൾ, ഇവന്റ് ലൂപ്പ് മനസ്സിൽ സൂക്ഷിക്കുക. ഇത് ഒരു അക്കാദമിക് ആശയം മാത്രമല്ല; ആധുനിക വെബിനെ നയിക്കുന്ന പ്രായോഗിക എഞ്ചിനാണ് ഇത്.