വാഗ്ദാനങ്ങൾക്കൊപ്പം JavaScript സ്ലൈഡ്ഷോ ഫംഗ്ഷനിലെ ആവർത്തനം ഒഴിവാക്കുന്നു

കോൾ സ്റ്റാക്ക് ഓവർഫ്ലോ ഒഴിവാക്കാൻ ആവർത്തന ജാവാസ്ക്രിപ്റ്റ് ഫംഗ്ഷൻ പരിഷ്ക്കരിക്കുന്നു

JavaScript - ആവർത്തനം ഒഴിവാക്കാൻ ഒരു ഇടവേള ലൂപ്പുള്ള വാഗ്ദാന-അടിസ്ഥാന സമീപനം

const duration = 2000; // Time to display each slide in milliseconds
const sizes = [[4000, 500], [1000, 4000], [600, 400], [100, 200], [4000, 4000]];
let n = 0;
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

function showSlides(duration) {
  const myParent = document.querySelector('#slide-div');
  setInterval(async () => {
    let sizeIndex = n++ % sizes.length;
    let w = sizes[sizeIndex][0];
    let h = sizes[sizeIndex][1];
    let myRandomizer = `https://placehold.co/${w}x${h}?text=${w}x${h}`;

    try {
      let myResponse = await fetch(myRandomizer);
      let myBlob = await myResponse.blob();
      let myUrl = URL.createObjectURL(myBlob);
      URL.revokeObjectURL(myParent.querySelector('img').src);
      myParent.querySelector('img').src = myUrl;
    } catch (error) {
      console.error('Error: ', error);
    }
  }, duration);
}

ആവർത്തനമില്ലാതെ അസിൻക്രണസ് ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നു

ജാവാസ്ക്രിപ്റ്റ് - വാഗ്ദാനങ്ങളുള്ള ഒരു ലൂപ്പ് ഉപയോഗിക്കുന്നതും സെറ്റ്ഇൻ്റർവൽ ഒഴിവാക്കുന്നതും പരിഹാരം

const duration = 2000; // Time to display each slide in milliseconds
const sizes = [[4000, 500], [1000, 4000], [600, 400], [100, 200], [4000, 4000]];
let n = 0;
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function showSlides(duration) {
  const myParent = document.querySelector('#slide-div');

  while (true) {
    let sizeIndex = n++ % sizes.length;
    let w = sizes[sizeIndex][0];
    let h = sizes[sizeIndex][1];
    let myRandomizer = `https://placehold.co/${w}x${h}?text=${w}x${h}`;

    try {
      let myResponse = await fetch(myRandomizer);
      let myBlob = await myResponse.blob();
      let myUrl = URL.createObjectURL(myBlob);
      URL.revokeObjectURL(myParent.querySelector('img').src);
      myParent.querySelector('img').src = myUrl;
    } catch (error) {
      console.error('Error: ', error);
    }

    await sleep(duration);
  }
}

JavaScript സ്ലൈഡ്‌ഷോയിലെ ആവർത്തനം ഒഴിവാക്കുന്നതിനുള്ള പൊതുവായ ചോദ്യങ്ങൾ

1. JavaScript-ൽ എന്താണ് ആവർത്തനം, എന്തുകൊണ്ട് സ്ലൈഡ്‌ഷോകളിൽ ഇത് ഒരു പ്രശ്‌നമാണ്?
2. ഒരു ഫംഗ്‌ഷൻ സ്വയം വിളിക്കുമ്പോൾ ആവർത്തനം സംഭവിക്കുന്നു, തുടർച്ചയായി ചെയ്യുകയാണെങ്കിൽ, അത് സ്റ്റാക്ക് ഓവർഫ്ലോയിലേക്ക് നയിച്ചേക്കാം. ഒരു സ്ലൈഡ്‌ഷോയിൽ, ഇത് അമിതമായ മെമ്മറി ഉപയോഗത്തിന് കാരണമാവുകയും ബ്രൗസർ ക്രാഷ് ആകുകയും ചെയ്യും.
3. ഒരു JavaScript ഫംഗ്‌ഷനിൽ എനിക്ക് എങ്ങനെ ആവർത്തനം ഒഴിവാക്കാനാകും?
4. ഒരു പരിഹാരം ഉപയോഗിക്കുന്നു setInterval അല്ലെങ്കിൽ setTimeout ആവർത്തനങ്ങളില്ലാതെ ജോലികൾ ഷെഡ്യൂൾ ചെയ്യാൻ. മറ്റൊരു ഓപ്‌ഷൻ ഇവൻ്റ്-ഡ്രൈവ് മോഡൽ ആണ്, അവിടെ നിർദ്ദിഷ്ട ഉപയോക്താവ് അല്ലെങ്കിൽ ബ്രൗസർ ഇവൻ്റുകൾ പ്രവർത്തനക്ഷമമാക്കുന്നു.
5. എന്തിനാണ് എൻ്റെ ശ്രമം while(true) ബ്രൗസർ ലോക്ക് അപ്പ് ചെയ്യണോ?
6. ഉപയോഗിക്കുന്നത് while(true) പോലുള്ള ഒരു അസമന്വിത പ്രവർത്തനം ഇല്ലാതെ await അല്ലെങ്കിൽ setTimeout താൽക്കാലികമായി നിർത്താതെ തുടർച്ചയായ ലൂപ്പിൽ പ്രവർത്തിക്കുന്നു, ഇത് പ്രധാന ത്രെഡിനെ തടയുന്നു, ഇത് ബ്രൗസർ മരവിപ്പിക്കുന്നതിന് കാരണമാകുന്നു.
7. എനിക്ക് ഉപയോഗിക്കാമോ Promises ആവർത്തനം ഒഴിവാക്കാൻ?
8. അതെ, Promises റിക്കർസീവ് ഫംഗ്‌ഷൻ കോളുകൾ ഇല്ലാതെ അസിൻക്രണസ് എക്‌സിക്യൂഷൻ അനുവദിക്കുക. ഇത് ഓരോ പ്രവർത്തനവും അടുത്തത് ആരംഭിക്കുന്നതിന് മുമ്പ് പൂർത്തിയാകുമെന്ന് ഉറപ്പാക്കുന്നു, ഇത് സ്റ്റാക്ക് ഓവർഫ്ലോ തടയുന്നു.
9. എന്താണ് requestAnimationFrame അത് എങ്ങനെ സഹായിക്കുന്നു?
10. requestAnimationFrame ബ്രൗസറിൻ്റെ പുതുക്കൽ നിരക്കുമായി സമന്വയിപ്പിച്ച സുഗമമായ ആനിമേഷനുകൾ സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു രീതിയാണ്. ഇത് കാര്യക്ഷമമാണ് കൂടാതെ ബ്രൗസർ ടാബ് നിഷ്‌ക്രിയമായിരിക്കുമ്പോൾ അനാവശ്യമായ കണക്കുകൂട്ടലുകൾ തടയുന്നു.

തുടർച്ചയായ ലൂപ്പുകൾക്കുള്ള ആവർത്തനം ഒഴിവാക്കുന്നു

JavaScript ഫംഗ്‌ഷനുകളിലെ ആവർത്തനം ഒഴിവാക്കുന്നു, പ്രത്യേകിച്ചും ഉപയോഗിക്കുമ്പോൾ വാഗ്ദാനങ്ങൾ, പ്രകടനം നിലനിർത്തുന്നതിന് നിർണായകമാണ്. ഒരു ലൂപ്പ് അധിഷ്ഠിത സമീപനത്തിലേക്കോ ഇവൻ്റ്-ഡ്രൈവ് മോഡലിലേക്കോ മാറുന്നതിലൂടെ, ഡെവലപ്പർമാർക്ക് കോൾ സ്റ്റാക്ക് അനന്തമായി വളരുന്നത് തടയാനും ബ്രൗസർ ക്രാഷുകൾ ഒഴിവാക്കാനും കഴിയും.

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